平时做项目肯定少不了图标，一些组件自带一些图标，但是可能没有我们需要的，这时候就要借助于强大的阿里图标了。怎么使用呢？
一、font-class方式
1.输入想要搜索的图标名搜索(要先登录账号)
2.将图标加入购物车
3.点击购物车，将图标加入项目，可以新建项目，也可以选择原有的项目
4.加入到项目后，会自动跳转到项目里，展示此项目里所有的图标
5.选择Font class,然后点击更新代码
6.代码更新完毕后会生成一个链接，将链接复制到浏览器地址栏，复制所有代码
7.在项目src/assets下新建一个iconfont.css文件，将复制好的代码粘贴到此文件
8.在main.js里引入iconfont.css文件
import '../src/assets/css/iconfont.css'9.现在就可以在需要的地方使用了
// 普通使用方式, iconfont 是你项目下的 font-family, my-icon-xxx 是图标类名<span class="iconfont my-icon-xxx"></span>注意事项：
a.可根据自己使用的组件，按照组件自有方式引入图标，比如vant,
b.必须加上class="iconfont" class-prefix="my-icon" 其中my-icon前缀是自己设置的，可以在项目里设置，以便和使用的前端UI自带的前缀区分
name是图标名字，可以在iconfont.css里找到。
好了，这就是阿里图标的使用方式之一，当然还有其它方式，有时间再更新。
重要更新
IE浏览器上可能会不显示。
解决方法：将字体文件下载到本地，引用路径修改为本地的
————————————-更新—————————————
二、Unicode方式
Unicode 是字体在网页端最原始的应用方式，特点是：
兼容性最好，支持IE6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。1.在项目中拷贝生成的@font-face
// 示例@font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff2') format('woff2'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg');}2.定义使用 iconfont 的样式
// 示例.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}3.挑选相应图标并获取字体编码，应用于页面
<span class="iconfont">3</span><i class="iconfont"></i>三、查看官方使用教程
1.打开项目，点击下载至本地
2.解压文件，得到如下图所示文件
3.打开demo_index.html,里面有图标的三种使用方式
转载：https://github.com/limchen233/Front-Web/