vue项目引入彩色iconfont图标

做项目的时候经常会使用到iconfont图标库，在项目开始的时候提前想好需要什么图标，最好是多下载几个可替换的同类型图标，宁滥勿缺（别问，问就是得到了教训），无色的还是彩色的，这点很重要。

首先了解一下如何在项目中使用iconfont图标

进入官网iconfont图标库搜索想要的图标

添加到项目中，点确定 ，没有项目就在旁边的加号新建

  

选择Font class,点击下载至本地，选择自己要放置在项目中的位置 

 解压压缩包到当前文件夹，得到以下文件，我只保存了这几个重要的

项目中如下 

  

然后在项目中的main.js中引入

//全局引入iconfont
import iconfont from './assets/iconfont/iconfont.css'

 在相关的组件下使用图标，即可显示

麻辣烫

 麻辣烫的代码是

问题来了理想很丰满现实很骨感

 图标是没有颜色的

使用彩色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-前缀

最后成功显示有颜色的麻辣烫啦

 这个方法参考了这位大哥

不过我在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'

 

 

在组件中使用

即可得到彩色图标

最好一次性添加下载项目需要的所有字体图标，不然的话，在后面突然要加一两个新的图标会很麻烦，方法参考这位大哥