1.了解网站图标
首先打开网站 Iconfont阿里巴巴矢量图标库 然后就会看到如下图所示：
20180516101008.png
比如说我们打开ant Design 官方图标库（点击进入）如下界面：
图片.png
2.选择几个自己所需图标
单个hover图片.png
可以自己直接下载，引用（和普通图片引入方式一样）。
我们说一下另外一种方式：
先选中图标到购物车：
如图所示，点击下载会有一个download.zip文件。（注：这一步需要登录）
购物车图片.png
下载之后，解压文件如下目录：
图片.png
3.将文件移动到项目中
可以将项目文件夹改名为icon，移动到vue-cli创建项目的static下如
图标目录所在位置图片.png
4.在项目中引入图标
在使用之前我们可以在解压的文件夹中，打开demo_fontclass.html文件，看到如下使用方法：
使用图片.png
具体的以我的项目参考如下：
在App.vue中引入css文件。（这里的引入方式是全局引用）
图片.png
在组件中引用
代码中引用.png
页面中实际效果.png
二、自定义类名方式
新建项目，可以看到：
新建项目.png
demo.png
下面引用的类名变化（与之前默认下载的相比）：
图片.png
如上图所示，如果不想输入miracle 类，那么可以打开iconfont.css文件添加类，如下：
[class^="el-icon-custom"], [class*=" el-icon-custom"] {
font-family:"miracle" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
那么直接可以使用下面的代码，而不需要多写几个类名。
<i class="el-icon-custom-xxx"></i>
图片.png
就先介绍到这里，关于直接添加至项目，大致应该差不多，可以尝试使用使用。
由于技术变化太快，关于使用方式可以查看官网使用帮助。 Iconfont阿里巴巴矢量图标库帮助
一般情况下，官网基本保持最新的。
