由于之前是做UI的，在之前的图标使用中，我都是直接将icon下载成png格式来做图，然后在网页中以img形式引入并显示。后来发现svg格式小一些，在网页中就用svg格式图标。
今天明白了阿里图标库真正的使用方法，没有使用过的朋友一起学习下。

1.找图标

在图标搜索引擎中找我们需要的图标，选中之后加入购物车：

2.下载图标代码

选出我们需要的几个图标后，找到购物车：

点击下载后下载的是压缩包，其中内容是css和字体文件：

3.使用字体图标

（1）将我们下载好的压缩包解压复制，到我们的项目中，改名为iconfont。

（2）在项目中引入iconfont的css文件

import './assets/iconfont/iconfont.css'

在web的main.js主文件中：

（3）使用iconfont
下载的文件中有一个html文件，打开观察图标名：

可以观察到其给我们自动生成了字体图标的类名和使用方法，我们接下载的使用就是通过类名引入字体图标。

<span class="iconfont icon-more"></span>

生成图标，对此类字体图标添加样式时与字体方法相同。

注：以后每次添加新图标，都需要在阿里图标中添加到购物车，重新下载所有文件替换之前下载到assets文件夹的iconfont文件。