在项目中使用icon是前端项目经常遇到的。一般会选择用图片，适合为数不多，或者设计图标复杂的情况，而现在越来越多的设计与前端会选择iconfont，至于iconfont是什么如何制作，后期会再出一篇文章，让设计与开发轻松自制iconfont。 阿里矢量图标库，截止写这篇文章的时候，已经有三百多万的图标，各种图形、风格，几乎项目想要的图标都可以找到，而且同一个图标可以选择颜色，做了几个项目，都是在阿里矢量图库找到合适的，设计小姐姐再也不用辛苦画了【撒花】 接下来，就来介绍一下项目中如何使用阿里的iconfont图标库，先看一下官网 打开官网 在home页搜索你想要的图标，

点击图标，加入购物车

点开购物车，添加至项目，没有项目可以新建项目，

如何在项目中使用：

在项目页，可以看到当前项目的所有图标。而开发项目要使用这些图标，可以选择在线引入，或者下载到本地。一般大部分项目都会选择下载到本地吧，因为iconfont在一些公司内网访问经常会受到极大限制。 方法一：直接引入，复制代码，添加到项目的css文件中即可

方法二： 点击下载到本地，下载icon文件，放入项目中

下载之后，打开下载的icon包，可以看到：

其中除了demo_*.html、demo.css这三个文件，其他的文件就是我们需要的。 拷贝icon文件放入到某个目录下，比如vue-cli3.0项目，我选择的是放入到assets/icon项目下，存放所有静态资源的地方。 使用，不管是方法一引入还是方法二，使用方法都是一样的 在css文件中添加复制的代码，在html中 其中，html标签可以随意选择，一般会选择i，iconfont 是通用class， ed-icon-icon-test 则代表了具体的图标，这个值可以从这边复制。选择【Font calss】或者【Symbol】，复制代码。class名在引入之前都可以自定义名称

或者你也可以通过unicode来定义图标，一般是选择icon class比较习惯

如何在vue 项目中使用iconfont 图标