前面我在Vue中引用了Font Awesome字体图标，Font Awesome目前收入了675个图标（这些是可缩放的矢量图标,可以通过CSS样式来改变图标的大小、颜色、阴影或者其它任何支持的效果），相对element来说还算挺多的，今天我们再来使用一个图库更全的方案，那就是阿里提供的iconfont图标库，这个是目前国内最为强大的矢量图标库中心，里面含有非常丰富的矢量图标库提供下载。
工具/原料
iconfont
方法/步骤
1
我们进iconfont官方图标库，找到自己想要使用的图标字体，然后将其加入购物车中选择下载至本地，iconfont有个好处那就是可以自行选择所需的字体然后生成对应的字体样式，这样可以减少很多用不到的字体代码，减少代码（为了更好的管理我们可以建个项目来专门存放对应的字体图标）。
2
下载之后我们到了一个iconfont字体压缩包，里面包含了字体和样式等文件和一个dome实例，不同的文件可以根据不同的需求来使用，这里我们可以参考dome_index.html提示来操作，里面为我们提供了各种使用方法，如Unicode引用、Font class引用、Symbol引用。
3
在项目中的assets中新建一个iconfont目录，把除了dome以外的weni文件都放入该目录，然后在main.js中全局引入css文件，通过import './assets/iconfont/iconfont.css' 引入即可
4
如果你想对图标做适当的调整我们可以在项目中对我们的图标进行适当的修改，如图中所示，调整位置、大小、方向、色彩等，相当的方便快捷。
5
接下来我们就可以在你想要使用的任何地方引用这些iconfont字体图标了，我比较喜欢用Font class来引入字体图标，所以这里我们使用 Font class方法来引入字体图标 ，在项目中可以看到每个图标都有对应的代码名，我们只要在需要的地方通过一个i标签来引用这个图标即可，如：
上一篇：如何做一个浏览器ICO图标
下一篇：inconfont的应用