uni-app 支持使用字体图标,使用方式与普通 web 项目相同,需要注意以下几点:
● 字体文件小于 40kb,uni-app 会自动将其转化为 base64 格式;
● 字体文件大于等于 40kb, 需开发者自己转换,否则使用将不生效;
● 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
方法一
1.下载iconfont
![在这里插入图片描述](https://img-blog.csdnimg.cn/d0ec08e952bd4608b567444641024a71.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA566AY2VyZQ==,size_20,color_FFFFFF,t_70,g_se,x_16)
否则上传会出现这个问题,字体文件没有被打包上传
![在这里插入图片描述](https://img-blog.csdnimg.cn/74d43e5fb1194aa99eee373ba6ff4b29.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA566AY2VyZQ==,size_20,color_FFFFFF,t_70,g_se,x_16)
2.修改字体路径
- 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径
![](https://img-blog.csdnimg.cn/4c572e907a7042f1bbe769e227d07660.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA566AY2VyZQ==,size_20,color_FFFFFF,t_70,g_se,x_16)
方法二
试用外部地址直接访问,删除woff和ttf文件
![在这里插入图片描述](https://img-blog.csdnimg.cn/963e649a93f94c72942aa728e6cc4f76.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA566AY2VyZQ==,size_20,color_FFFFFF,t_70,g_se,x_16)
3.引用
在公共css的APP.vue中引用
![在这里插入图片描述](https://img-blog.csdnimg.cn/b1feb86edb744ccf981463e6d806a104.png)
上传和运行,就没什么问题了
![在这里插入图片描述](https://img-blog.csdnimg.cn/186bf33e800240a2b6ee91aaa22786a7.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA566AY2VyZQ==,size_20,color_FFFFFF,t_70,g_se,x_16)