如何在uni-app使用iconfont字图标

2年前 (2022) 程序员胖胖胖虎阿
166 0 0

添加图标

打开,https://www.iconfont.cn/ 网站,找到自己的喜欢的图表加入到项目中

如何在uni-app使用iconfont字图标

下载本地

点击下载至本地

如何在uni-app使用iconfont字图标

拷贝文件

iconfont.cssiconfont.woff,iconfont.woff2 复制到自己的项目中,

打开iconfont.css文件,我需要去编辑框框的地方

如何在uni-app使用iconfont字图标

资源转换

uni-app 字体文件小于 40kb,uni-app 会自动将其转化为 base64 格式
uni-app 本地路径图标字体支持情况:字体文件大于等于 40kb, 需开发者自己转换,否则使用将不生效

转换工具

https://www.giftofspeed.com/base64-encoder/

打开转换工具网站,选择iconfont.ttf字体进行转换

如何在uni-app使用iconfont字图标

复制内容,回到代码

如何在uni-app使用iconfont字图标

效果

浏览器端

如何在uni-app使用iconfont字图标

App端

如何在uni-app使用iconfont字图标

版权声明:程序员胖胖胖虎阿 发表于 2022年11月2日 上午8:00。
转载请注明:如何在uni-app使用iconfont字图标 | 胖虎的工具箱-编程导航

相关文章

暂无评论

暂无评论...