一、登陆阿里云矢量图标库，把需要的字体图标加入到自己的项目中
/home/index
二、阿里云图标的四种方式（推荐第二种方式Font class引入，如果不考虑网络问题可以用在线引入的方式）
进入项目以后会看到阿里云可以选择三种方式进行导入图标
1、Unicode
Unicode的主要的特点
优势
兼容性最好，支持ie6+支持按字体的方式去动态调整图标大小，颜色等等
劣势
不支持多色图标在不同的设备浏览器字体的渲染会略有差别，在不同的浏览器或系统中对文字的渲染不同，其显示的位置和大小可能会受到font-size、line-height、word-spacing等CSS属性的影响，而且这种影响调整起来较为困难
使用方法：
第一步：在自定义的全局样式表中引入自定义字体 `font-face，并定义使用iconfont的样式
@font-face {font-family: "iconfont";src: url('iconfont.eot'); /* IE9*/src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */url('iconfont.woff') format('woff'), /* chrome, firefox */url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */}.iconfont {font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
第二步：挑选相应图标并获取字体编码，应用于页面
<i class="iconfont"></i>
2、Font class
Font class具有如下特点：
兼容性良好，支持ie8+相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
1、进入项目以后选择 Font class 并下载到本地
下载到本地，解压以后的文件夹列表如下：
2、把下载的文件粘贴到自己的项目中，记得放在 static（或assects目录）文件目录下，因为字体图标也属于静态资源的一部分。
3、在main.js文件内全局引入阿里云字体图标 css，记得使用路径要正确，如果此时编译不正确，说明引用路径存在问题
为避免出现图标方框的情况，请对font进行初始化
在全局样式表中加入如下代码
// 阿里字体图标设置.icon, .iconfont {font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
4、项目中使用字体图标，就可以使用了
3、Symbol SVG图片格式
支持多色图标了，不再受单色限制。支持像字体那样通过font-size,color来调整样式。支持 ie9+可利用CSS实现动画。减少HTTP请求。矢量，缩放不失真可以很精细的控制SVG图标的每一部分使用方法：
拷贝下载项目，复制inconfont.js到资源文件目录下，并引入inonfont.js文件
在 index.html 中引入iconfont.js 和 通用样式（引入一次就行）
<script src="/static/Iconfont/iconfont.js"></script><style>.icon {width: 1.5em;height: 1.5em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;cursor: pointer;margin-right: 1rem;}</style>
挑选相应图标并获取类名，应用于页面：
<svg class="icon menuIcon" aria-hidden="true"><use :xlink:href="#icon-xxx"></use></svg>
4、在线引入iconfont
1、生成icon的在线css链接
2、在Vue项目中，引用在线css链接和新建css样式文件 （重点）
2.1 在Vue项目中创建iconfont.css文件，当然名字自定义。
[class^="icon-all"], [class*="icon-all"]{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
这里的 icon-all 是我自己起的icon前缀名。
2.2 引用阿里项目在线的css链接
在index.html里面引用的。放在前面
2.3 引用自己创建的css文件
2.4 接着就可以在项目中使用你的icon啦~~~~
