图片代替图标

<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>