新建项目


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




 




开始选择图标


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

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




 


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中使用iconfont_官网_02


图标


vue报错原因：

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