iconfont 图标在vue里的使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了iconfont 图标在vue里的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

2、寻找自己需要的图标

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

iconfont 图标在vue里的使用,vue,前端vue,nbcio-boot,vue.js,前端,javascript

3、点购物车

iconfont 图标在vue里的使用,vue,前端vue,nbcio-boot,vue.js,前端,javascript

4、添加项目

iconfont 图标在vue里的使用,vue,前端vue,nbcio-boot,vue.js,前端,javascript

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

iconfont 图标在vue里的使用,vue,前端vue,nbcio-boot,vue.js,前端,javascript

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

iconfont 图标在vue里的使用,vue,前端vue,nbcio-boot,vue.js,前端,javascript

7、下载解压

iconfont 图标在vue里的使用,vue,前端vue,nbcio-boot,vue.js,前端,javascript

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

iconfont 图标在vue里的使用,vue,前端vue,nbcio-boot,vue.js,前端,javascript

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、效果图如下：

iconfont 图标在vue里的使用,vue,前端vue,nbcio-boot,vue.js,前端,javascript