1.首先来到阿里云的iconfont矢量图标库搜索你想要的字体图标,然后添加入库,点击右下角的购物车按钮。
2.点击添加至项目
3.点击确认
4.点击下载至本地
5.在uni-app项目中的static静态资源目录下,新建一个fonts目录,用于存放字体图标的相关样式文件。
6.解压我们所需要的字体图标相关文件至/static/fonts目录下。
7.如果我们希望字体图标在全局生效,那就应该在app.vue中全局引入刚刚解压的iconfont.css样式表。
8.然后我们会看到这样的报错。
9.打开iconfont.css外部样式表,我们可以看到文件路径都对不上,需要修改。
10.拼接上我们正确的路径~@/static/fonts,注意第三行这个url不需要加路径。
11.现在我们可以在任意页面使用我们的字体图标了,比如我们在index.vue页面使用字体图标。
我们回到刚刚下载好的字体图标文件压缩包,找到这个demo_index.html文件,它就是我们的说明书了,打开它看看。
在选项卡中选中Font class
往下拉,找到用法说明
哦,我们明白了,亲自回到自己项目操作下吧。
在XXX后面填入这个图标的名称。
注意事项:
12.网页预览效果。
拓展:后面添加进来的图标要这样操作,分号结束上一部分,src带出新加进来的icon