【不想学习的日常】vue项目插入iconfont图标

【不想学习的日常】vue项目插入iconfont图标

1、在阿里巴巴矢量图标库中选择自己想要的矢量图–>【下载代码】
2、如果项目已经安装了css-loader依赖。如果没有就在命令行安装依赖

npm install css-loader -D

反正上面的我失败了

pm install css-loader --save-dev

3、在项目src->asserts中新建文件夹iconfont，将下载的安装包解压后拉进去

4、在mian.js中导入iconfont.css文件

import "./assets/iconfont/iconfont.css";

5、在你想要插入的位置输入这段代码

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

红框那个地方要和iconfont.css中的框框部分一致（下面第二张图）
绿框和绿框一致，绿框就是它名字啦！


然后 就可以了，之前按照网上的教程来，运行之后图标变成了框框，就是上面那张图的问题，红框没有对应，直接用了人家教程里面的font-family。