第一步:
先去iconfont-阿里巴巴矢量图标库挑选要用到的图标加入购物车
第二步:
1、添加好后,点击上方购物车里的添加项目
2、没有创建过项目可以自己创建一个
第三步:
添加至项目后,把图标下载至本地
第四步:
1、下载好的iconfont文件如图所示:
2、除了iconfont.css其余文件一概删除
第五步
将iconfont.css 文件放置在目标文件夹下,如图所示:
第六步
1、回到iconfont网站,点击生成
2、生成后,复制代码,只需要ttf格式的地址就行
3、打开项目中的iconfont.css
文件,删除文件中src
属性的内容
4、将复制的ttf
格式的代码放进src
中,如图所示:
5、字体图标的使用
6、最后在App.vue 的 style标签中引入iconfont.css
重新编译,最终效果如图所示: