做项目的时候经常会使用到iconfont图标库，在项目开始的时候提前想好需要什么图标，最好是多下载几个可替换的同类型图标，宁滥勿缺（别问，问就是得到了教训），无色的还是彩色的，这点很重要。
首先了解一下如何在项目中使用iconfont图标
进入官网iconfont图标库搜索想要的图标
添加到项目中，点确定，没有项目就在旁边的加号新建
选择Font class,点击下载至本地，选择自己要放置在项目中的位置
解压压缩包到当前文件夹，得到以下文件，我只保存了这几个重要的
项目中如下
然后在项目中的main.js中引入
//全局引入iconfontimport iconfont from './assets/iconfont/iconfont.css'
在相关的组件下使用图标，即可显示
<i class="iconfont icon-icon-test"></i><span>麻辣烫</span>
麻辣烫的代码是
问题来了理想很丰满现实很骨感
图标是没有颜色的
使用彩色iconfont方法
经查阅资料，有两种办法是在图标下载的时候选择Unicode或者Symbol
具体办法参考这位大哥的Unicode方法和这位大哥的Symbol方法
但是我已经下载过了Font class类型的图标了，删除之前的文件重新选择类型下载引用多麻烦呀
所以又找到了两种办法
第一种办法
终端下载插件工具iconfont-tools
npm install -g iconfont-tools
然后在解压图标文件的文件夹下运行cmd,敲回车
输入以下命令
iconfont-tools
这里要注意，需要cd到原来下载的文件夹里面才能运行命令，否则会报错，然后一直敲enter就行
当前文件夹多了一个文件
打开文件夹，复制里面的复制iconfont-weapp-icon.css文件，粘贴到static文件夹里，放在别的地方应该也可以，引入的时候路径正确就行
在main.js中引入iconfont-weapp-icon.css文件
import '../static/fonts/iconfont-weapp-icon.css'
在需要用到图标的组件中使用，这里必须加上t-前缀
<i class="t-icon t-icon-icon-test"></i>
最后成功显示有颜色的麻辣烫啦
这个方法参考了这位大哥
不过我在App.vue文件的style里面引入iconfont-weapp-icon.css文件出现报错了，然后我在main.js里面引用成功了
第二种办法
参考了这位大哥
无需下载iconfont-tools工具，直接在main.js中引用iconfont.css和iconfont.js文件
import './assets/iconfont/iconfont.css'import './assets/iconfont/iconfont.js'
在组件中使用
<svg class="icon-font"><use xlink:href="#icon-icon-test"></use></svg>
即可得到彩色图标
最好一次性添加下载项目需要的所有字体图标，不然的话，在后面突然要加一两个新的图标会很麻烦，方法参考这位大哥
