vue中iconfont字体图标的使用以及在已有图标中新增图标

阿里巴巴图标官网：https://www.iconfont.cn/

1.选择要下载的文件图标，图标会添加至购物车

注：如果需要批量下载当前也的所有图标可查看此篇博文https://blog.csdn.net/qq_45695853/article/details/116226868

2.点击购物车即可下载（根据需求任选其一）

小仙女选的是下载代码来进行演示

3.下载会生成一个压缩包，解压过后可看到如下目录

打开demo_index.html查看如何使用

4.此处演示Font calss

在vue项目中引入如下：

注意：需要修改的是iconfont.css样式表中字体图标的引入路径，需要和自己项目的路径对应，不然会报错

5.使用方法如下

图标显示如下

补充如何在已有的图标库中增加新的图标
（1）首先在官网上找到要下载的图标，添加至购物车，点击下载代码

（2）修改字体文件名如下（和之前项目中的名字不一样即可）：

（3）修改iconfont.css样式表字体的引入路径（和自己项目的路径对应即可）

（4）将以上修改的代码引入即可，删除之前的字体文件和css样式表（如下是我的目录结构）

亲测此方法有效