vue中使用iconfont
第一步: 进入官网,注册--登录
第二步: 图标管理---我的项目--创建项目---新建
![](http://upload-images.jianshu.io/upload_images/6421933-a6c68e10a6817c2f.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1090/format/webp)
新建项目
第三步: 进入图标库--官方图标库
![](http://upload-images.jianshu.io/upload_images/6421933-bf5b2d9776ef6bb3.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
开始选择图标
第四步:选中图标-- 添加入库-- 添加至项目---选择刚刚创建的项目--确定
下面举例我们选择了两个图标
![](http://upload-images.jianshu.io/upload_images/6421933-cef745dd73069167.png?imageMogr2/auto-orient/strip|imageView2/2/w/467/format/webp)
购物车中的图标
![](http://upload-images.jianshu.io/upload_images/6421933-593275737e94ed63.png?imageMogr2/auto-orient/strip|imageView2/2/w/479/format/webp)
添加至项目
第五步: 下载至本地---- 点击下载至本地按钮
![](http://upload-images.jianshu.io/upload_images/6421933-464aa399609c708f.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
下载至本地
第六步: 解压下载的压缩文件----整理放入vue中的static中(在static中新建文件夹 icon ),同时直接把iconfont.css放入static中
![](http://upload-images.jianshu.io/upload_images/6421933-314b927e7b25a9a0.png?imageMogr2/auto-orient/strip|imageView2/2/w/624/format/webp)
放入src/assets/icon中
![](https://img2020.cnblogs.com/blog/1560503/202011/1560503-20201102170653312-392749152.png)
第七步: vue的main.js中引入 *注意必须: npm install css-loader -s 否则报错
import "../static/iconfont.css"
第八步: 使用iconfont
<i class="iconfont icon-eye" style="color: #999;font-size: 20px;"></i>
![](http://upload-images.jianshu.io/upload_images/6421933-64c985c47a849bbb.png?imageMogr2/auto-orient/strip|imageView2/2/w/207/format/webp)
图标
vue报错原因:
- 没有npm install css-loader -s
- 没有修改iconfont的URL的引用地址
- 没有在main.js中引入iconfont.css
作者:冬天的_太阳
链接:https://www.jianshu.com/p/fa6ce8e6b011
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。