最近写项目卡在iconfont的引入上面,实在太粗心了呜呜呜,浪费了好多时间,以此片记录一下!
1、选择想要的图标加入购物车,官网地址
![](https://img-blog.csdnimg.cn/img_convert/baa448098bb96c2c9bb9386214a35fca.png)
2、点击右上角购物车图标。点击下载代码,并添加至项目。
注意:下载代码要记住指定位置。添加项目可以添加到以前的项目,没有项目就创建项目。
![](https://img-blog.csdnimg.cn/img_convert/d131c05f397df575f8bb2d653e36e092.png)
3、将下载好的代码文件放入项目中的assets目录的styles下
iconfont.css直接放在styles下
在styles目录下新建目录iconfont,将iconfont.ttf、iconfont.woff、iconfont.woff2放在里面
一共是复制了四个文件
![](https://img-blog.csdnimg.cn/img_convert/be3521ec65ce920c9cab4bacf4452701.png)
4、到iconfont.css文件中修改路径
(我就是忽略了这一步,所以一直出错,还下载了css-loader反正一堆网上找了方法没解决,后面才发现是路径的问题,弄了一上午...o(╥﹏╥)o)
![](https://img-blog.csdnimg.cn/img_convert/2ae9ebb72a39322d61858076a352c278.png)
不修改服务器不会报错,所以一直不知道是这里的问题
5、到main.js中引入iconfont.css文件
![](https://img-blog.csdnimg.cn/img_convert/0d39a728f5da99dd8a0b14ad0470264e.png)
6、点击资源管理下的我的项目,找到刚才项目下的图标
![](https://img-blog.csdnimg.cn/img_convert/2db70dbd540a4f8d7f4b2ba73df0e574.png)
7、复制图标的代码后再指定位置使用
注意:引用的图标一定要有class=“iconfont”
(好吧这里我忘了加,所以一直不出现,同学们不要像我这里傻缺)
![](https://img-blog.csdnimg.cn/img_convert/1c7ccafbd5d9d078b31c9a801af4d120.png)
![](https://img-blog.csdnimg.cn/img_convert/b9f4f0f2996d3d203f3fa47ec3497648.png)
成功引入图标
![](https://img-blog.csdnimg.cn/img_convert/a707db349711af9c0f35ea57caae2ce5.png)
如果没有写class图标是这样的
![](https://img-blog.csdnimg.cn/img_convert/a36cd8609f6c0ab9d1b5f0f841ac0eb5.png)
好了,到这里就可以随心所欲的使用你的图标了,希望这篇帖子能帮助到宝子们,完结✿✿ヽ(°▽°)ノ✿