关于uni-app如何引入自定义图标(iconfont)


问题:
1:微信小程序不支持本地字体,如果需要小程序的话, 只能使用网络路径资源。(字体图标:微信不支持本地字体图标。)

2:如果不考虑小程序,静态资源需要放在特定的目录下。common目录

解决方法:
1:不用图标改用图片,但失去了矢量和方便高亮变色的好处
2:字体文件放到服务器,从网络地址引用
3:将字体图标转换为base64格式字符串直接放到css里
注意:对于首页底部的原生tab,是在pages.json里配置,微信只支持图片不支持

base64的方法:

iconfont base64 的文件詳情
微信图片_20181211094800-1024x359.png

构建iconfont 组件目录结构
微信图片_20181211094807-1024x491.png

引入方法和調用方法
微信图片_20181211094822-300x128.png
uni-app h5编译结果:
微信图片_20181211094915.png
控制台
1.png

声明:麋鹿与鲸鱼|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 关于uni-app如何引入自定义图标(iconfont)


Carpe Diem and Do what I like