阿里巴巴IconFont的图标的下载使用紫藤萝yu

1、直接下载.png文件格式，按照图片文件在项目中导入使用。

3、使用阿里巴巴图标项目管理功能，以下详细说明具体的使用方案。

1）、选择所需的图标，加入购物车。

2）、在购物车中，把所需的图标添加至项目。可新建项目或者选择以有的项目。

对在此处新增的项目，其有默认的FontClass/Symbol和FontFamily。我们可以自行修改，但是一定不要写成：el-icon-***这样的形式。如果你写成这样的前缀，会和element-ui框架所带的图标（icon）冲突，导致你图标显示不出来。

3）、在图标管理，我的项目目录下，即可查看刚添加到项目中的图标文件。

4）、点击“下载至本地”，把所有的项目中的图标信息下载到本地目录，打开这个压缩包，里面有一些文件是没用的。留着选中的，其他没用的可以删除。

5）、在vue-cli、element-ui项目中，src->assets目录下新建文件夹iconfont，用于存放下载所得的压缩包的文件。

6）、在项目中的main.js文件，导入iconfont.css样式，例如：importiconfontfrom'@/assets/iconfont/iconfont.css'

7）、在页面中直接使用即可，例如：

使用标签i，类目需要添加新增项目名称的fontFamily，以及每个图标的类名。

类名查看，在我的项目中，选择symbol，即可看到每一个图标的类名

8）、假如后续还需要添加新的图标，那就继续往里面添加入库，然后需要重新下载文件，找到有用的文件，重新复制粘贴到icon文件夹里面来，一定要把之前的替换掉重新使用最新的。对项目中的图标库做增删改并不会影响其类名，因此不用担心图标样式找不到或者发生变化。

总结：文件下载的方式比使用svg的方法的好处是剩下代码量，不需要先写好svg文件的读取配置方法。但是缺点是每次图标库有更新需要重新下载替换旧文件。