element-ui 配置iconfont

Posted 2021-09-12 前端box

在iconfont.cn 选择好项目需要的icon，添加进项目，下载好font文件，然后在

全局scss代码里写上：

@font-face {
  font-family: "zr";
  src: url(\'../icon/download.ttf\') format(\'truetype\');
}

.zr {
  font-family: zr!important;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: baseline;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
}

.icon-download:before {
  content: "\\e635";
}

.icon-imp:before {
  content: "\\e6fd";
}

使用：

 <el-button
    size="mini"
    icon="zr icon-imp"
    @click="handleImp(scope.$index, scope.row)"
    :disabled="scope.row.state === 1"
  >
    导入
  </el-button>