vue项目中自定义图标的使用

此篇博客以使用Iconfont-阿里巴巴为例：

Iconfont-阿里巴巴字体图标库

Step1：选择自己想要的图标，加入购物车

可以新建一个项目，也可以就用之前有的项目：


然后在图标管理中找到我的项目：

直接下载到本地：

就会出现这样的一个包：

将压缩包打开，将里面的文件的文件复制到项目的文件下，然后在文件的main.js中引入

方法一：
将样式iconfont.css文件引入之后就可以直接使用

//使用方法1：

//使用方法2：
 

最后效果：


由于使用的是Unicode 和 font-class 引用，只能显示单色

方法二：
Symbol引用，只需将里面的JS文件引入到main.js中，然后将通用CSS代码从main.js引入

import "./assets/iconfont/iconfont"

然后就可以在所有的页面使用这个图标了
使用方法：

最后效果