前提
elementui圖標庫圖標較少
當你想用elementui的控件而不想用它的圖標時,就可以使用自定義的方式來實現
實現
el-icon-my-export為我自定義的圖標命名
導出
//使用圖片來替換
//before屬性中的content文本是用來占位的,必須有
//可以設置字體大小來確定大小
//使用visibility: hidden;來隱藏文字
.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屬性設置對應的content就行
.el-icon-my-export{
font-size: 16px;
}
.el-icon-my-export:before{
content: "\e611";
}
content里面使用漢字大小會比較正常,但是漢字有時候會出現亂碼,可以使用Unicode編碼
//編碼后的的替為 \u66ff
//書寫到css里面的時候需要去掉u
.el-icon-my-export:before{
content: "\66ff";
font-size: 16px;
visibility: hidden;
}
其他控件的圖標替換大多如此,當然具體問題具體分析,我也不確定會不會有不同的情況