如何在uni-app中正确的引用字体图标库???
-
我们以阿里图标库为例 下载地址
1.创建项目
2.选自己所需要的图标加入项目
3.下载iconfont图标资源
-
在项目中使用字体图标,如果需要全局使用需在App.vue中引用
1.新建文件夹放入字体图标资源
2.引用字体图标
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210225165138672.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTk0MDc0,size_16,color_FFFFFF,t_70#pic_center)
-
引用图标报错解决(项目实测)
使用本地路径图标字体需注意:
- 为方便开发者,在字体文件小于 40kb 时,
uni-app
会自动将其转化为 base64 格式; - 字体文件大于等于 40kb,仍转换为 base64 方式使用的话可能有性能问题,如开发者必须使用,则需自己将其转换为 base64 格式使用,或将其挪到服务器上,从网络地址引用;
- 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
解决方案一:
该方案使用绝对路径引用字体资源
iconfont.css修改前
修改后
解决方案二
删除不必要的引用资源,修改后
解决方案三
使用网络资源解决,减少自身项目体积,提高项目运行速度 - 为方便开发者,在字体文件小于 40kb 时,
各位看官觉得对您有所帮助,请帮小的点个赞