iconfont 图标在vue里的使用

刚好项目需要使用一个iconfont的图标，所以记录一下这个过程

1、iconfont-阿里巴巴矢量图标库 这个注册一个账号，以便后续使用下载代码时需要

2、寻找自己需要的图标

  我主要是找两个图标 ，一个加号，一个减号，分别加入到购物车里

 3、点购物车

4、添加项目

 

5、进入项目后进行项目设置，勾上下面这些

扫描二维码关注公众号，回复： 16475402 查看本文章

 

 6、生成代码，一把使用font class

 7、下载解压

 8、把上面勾选文件复制到自己vue项目的@assets里，如下

 9、在main.js里加入css

import '@/assets/styles/iconfont/iconfont.css'

10、这样就可以在实际项目里使用了

如下，用树的加减号，当然这个是个例子：

<el-table :data="data" border style="width: 100%" :row-style="showTr" highlight-current-row @selection-change="selsChange" :style="tableMaxHeight">
    <el-table-column type="selection" width="55"> </el-table-column>
    <el-table-column v-for="(column, index) in columns" :key="column.dataIndex" :label="column.text" align="left">
      <template slot-scope="scope">
        <span v-if="spaceIconShow(index)" v-for="(space, levelIndex) in scope.row._level" class="ms-tree-space"></span>
        <span v-if="toggleIconShow(index,scope.row)" @click="toggle(scope.$index)">
          <i v-if="!scope.row._expanded" class="iconfont icon-jiahao" aria-hidden="true"></i>
          <i v-if="scope.row._expanded" class="iconfont icon-jianshao" aria-hidden="true"></i>
        </span>
        <span v-else-if="index===0" class="ms-tree-space"></span>
        <span v-html="scope.row[column.dataIndex]"></span>
      </template>
    </el-table-column>
    <slot></slot>
    
  </el-table>

11、效果图如下：