关于element-ui:自定义elementui中的图标

前提

elementui 图标库图标较少
当你想用 elementui 的控件而不想用它的图标时，就能够应用自定义的形式来实现

实现

el-icon-my-export 为我自定义的图标命名

<el-button class="default" icon="el-icon-my-export"> 导出 </el-button>

// 应用图片来替换
//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;
}