图片代替图标
<template>
<div>
<div>
<i class="el-icon-share"></i>
<i class="el-icon-my-export"></i>
</div>
<el-button type="primary" icon="el-icon-my-export" >导出</el-button>
<el-button type="primary" icon="el-icon-delete">导出</el-button>
</div>
</template>
<style>
.el-icon-my-export {
background: url("~@/assets/images/hlb.png") center no-repeat;
background-size: cover;
}
.el-icon-my-export:before {
content: "替";
font-size: 16px;
visibility: hidden;
}
.el-icon-my-export {
font-size: 16px;
}
.el-icon-my-export:before {
content: "\e611";
}
</style>
字体库
- 把图标加到项目中
- 项目编辑 FontClass/Symbol 前缀 ：
el-icon-。
- main.js中引入iconfont.css这个文件
import './assets/taobao-font/iconfont.css'
<i class="iconfont el-icon-biji"></i>
<i class="iconfont el-icon-bingtutubiao"></i>
<i class="iconfont el-icon-baitian"></i>
<i class="iconfont el-icon-DOC2x"></i>
<el-button type="primary" icon="iconfont el-icon-biaoqian">导出</el-button>
