动态

详情 返回 返回

如何在uni-app使用iconfont字圖標 - 动态 详情

添加圖標

打開，https://www.iconfont.cn/ 網站，找到自己的喜歡的圖表加入到項目中

image.png

下載本地

點擊下載至本地

image.png

拷貝文件

將iconfont.css，iconfont.woff,iconfont.woff2 複製到自己的項目中，

打開iconfont.css文件，我需要去編輯框框的地方

image.png

資源轉換

uni-app 字體文件小於 40kb，uni-app 會自動將其轉化為 base64 格式
uni-app 本地路徑圖標字體支持情況：字體文件大於等於 40kb， 需開發者自己轉換，否則使用將不生效
轉換工具

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

打開轉換工具網站，選擇iconfont.ttf字體進行轉換

image.png

複製內容，回到代碼

image.png

效果

瀏覽器端

image.png

App端

40237ee7d9cce800df82bd318b94956.jpg

字體 , webapp , uni-app , iconfont , 前端
user avatar linlinma 头像 zourongle 头像 leexiaohui1997 头像 huichangkudelingdai 头像 dunizb 头像 xiaolei_599661330c0cb 头像 nqbefgvs 头像 licin 头像 milton 头像 ldh-blog 头像 Asp1rant 头像 jinl9s27 头像
点赞 63 用户, 点赞了这篇动态!
点赞

Add a new 评论

Some HTML is okay.