vue中使用iconfont

第一步： 进入官网，注册--登录

阿里巴巴矢量库

第二步： 图标管理---我的项目--创建项目---新建

新建项目

第三步： 进入图标库--官方图标库

开始选择图标

第四步：选中图标-- 添加入库-- 添加至项目---选择刚刚创建的项目--确定

下面举例我们选择了两个图标

购物车中的图标

添加至项目

第五步： 下载至本地---- 点击下载至本地按钮

下载至本地

第六步： 解压下载的压缩文件----整理放入vue中的static中（在static中新建文件夹 icon ），同时直接把iconfont.css放入static中

放入static的icon里面

 

注意要修改地址

 

5个URL要修改加./icon/

第七步： vue的main.js中引入 *注意必须： npm install css-loader -s 否则报错

 

import "../static/iconfont.css"

第八步： 使用iconfont

 

<span class="icon iconfont">&#xe6a1;</span>

不同的图标 只是span的内容不一样，class名称一样。

图标

vue报错原因：

• 没有npm install css-loader -s
• 没有修改iconfont的URL的引用地址
• 没有在main.js中引入iconfont.css

各位，今天的分享到这里，谢谢大家的阅读。

作者：冬天的_太阳
链接：https://www.jianshu.com/p/fa6ce8e6b011
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。