技术选型总是换最近切回到使用vue 记录一下 以后方便查找
第一步: 进入官网,注册--登录
第二步: 图标管理---我的项目--创建项目---新建
第三步: 进入图标库--官方图标库
第四步:选中图标-- 添加入库-- 添加至项目---选择刚刚创建的项目--确定
第五步: 下载至本地---- 点击下载至本地按钮
第六步: 解压下载的压缩文件----整理放入vue中的static中(在static中新建文件夹 icon ),同时直接把iconfont.css放入static中
注意要修改地址
第七步: vue的main.js中引入 *注意必须: npm install css-loader -s 否则报错
import "../static/iconfont.css"
第八步: 使用iconfont
<span class="icon iconfont"></span>
不同的图标 只是span的内容不一样,class名称一样。
vue报错原因:
- 没有npm install css-loader -s
- 没有修改iconfont的URL的引用地址
- 没有在main.js中引入iconfont.css