-
进入https://www.iconfont.cn/官网
-
将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中
-
打开目标项目,下载代码至本地
-
下载好的iconfont文件如图所示:
-
将iconfont.css 文件放置在目标文件夹下,如图:
-
回到iconfont网站,点击复制代码,只需要ttf格式的地址就行
url('//at.alicdn.com/t/font_1886313_ifiye13cjpl.ttf?t=1625566965328') format('truetype');
7. 打开项目中的iconfont.css
文件,删除文件中src
属性的内容
-
将复制的
ttf
格式的代码写进@font-face中,如图:
-
字体图标的使用
-
最后在App.vue 的 style标签中引入iconfont.css
-
重新编译,最终效果如图所示: