前提

elementui圖標(biāo)庫(kù)圖標(biāo)較少

當(dāng)你想用elementui的控件而不想用它的圖標(biāo)時(shí)，就可以使用自定義的方式來(lái)實(shí)現(xiàn)

實(shí)現(xiàn)

el-icon-my-export為我自定義的圖標(biāo)命名

導(dǎo)出

//使用圖片來(lái)替換

//before屬性中的content文本是用來(lái)占位的,必須有

//可以設(shè)置字體大小來(lái)確定大小

//使用visibility: hidden;來(lái)隱藏文字

.el-icon-my-export{

background: url(/officeHouse/resources/images/export.png) center no-repeat;

background-size: cover;

}

.el-icon-my-export:before{

content: "替";

font-size: 16px;

visibility: hidden;

}

//如果直接使用字體圖片

//直接在before屬性設(shè)置對(duì)應(yīng)的content就行

.el-icon-my-export{

font-size: 16px;

}

.el-icon-my-export:before{

content: "\e611";

}

content里面使用漢字大小會(huì)比較正常，但是漢字有時(shí)候會(huì)出現(xiàn)亂碼，可以使用Unicode編碼

//編碼后的的替為 \u66ff

//書(shū)寫到css里面的時(shí)候需要去掉u

.el-icon-my-export:before{

content: "\66ff";

font-size: 16px;

visibility: hidden;

}

其他控件的圖標(biāo)替換大多如此，當(dāng)然具體問(wèn)題具體分析，我也不確定會(huì)不會(huì)有不同的情況

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的elemntui icon 大小_自定义elementui中的图标的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。