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阿里巴巴矢量图标库帮助
一般情况下，官网基本保持最新的。