前言

笔者最近在做自己的毕设项目，前端模板使用的是vue-element-admin，它已经整合了Element UI，也是我无数不多熟悉的组件库，好像有点儿扯远了，在完成了几个模块之后，我越看越觉得那些Element UI自带的图标不是很美观，所以就开始在网络上找素材，在这个过程中找到了iconfont阿里巴巴矢量图库，开始今天的正题。

操作步骤

首先访问iconfont的官网：www.iconfont.cn/ 并注册自己的账号。 在登陆了自己的账号之后，搜索自己想要的图标，这里我以搜索猫为例，选择一张自己喜欢的添加到库，然后点击右上角的购物车就可以看到我们刚刚添加的，然后选择添加至项目，如果没有则新建一个就好，这里我建一个名为test的项目添加进去。

接下来就会自动跳转到一个页面，类型选择Font class，就可以下载到本地进行使用了。 解压下载的压缩包，并将以下几个文件放到src/assets目录下（在前言中我提到我使用的模板为vue-element-admin），这里我们新建一个icons目录，如果在项目中以后引入更多第三方图标，就都放到这里，方便我们统一管理 完成上面操作后，在src目录下的main.js引入

//引入我们自己的图标
import '@/assets/icons/iconfont.css'

引入之后，就可以在我们的页面上根据自己的需求添加图片了，我们需要用到 i 标签，代码实例如下：

//class属性值就是我们引入的css样式的名称 后面跟的就是图标的名称
<i class="iconfont icon-mao"></i>

图标名称获取的方式在iconfont的项目中，因此，我们后续引入更多图标只需要把网站上我们需要的添加到自己项目中，在代码中需要的位置使用 i 标签引入即可。 演示例子使用效果：

小结

除了上面的方法，也可以把iconfont作为素材库去找素材，然后直接下载PNG到我们本地进行使用或者上传到图床里引用使用，但是这样没有在网站上建立项目那样更好地管理我们使用的素材。当然了，最终怎么使用还是跟着自己需求走。