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

 

posted @ 2020-07-01 09:59  ThisCall  阅读(223)  评论(0编辑  收藏  举报