博客 / 詳情

返回

如何在uni-app使用iconfont字圖標

添加圖標

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

image.png

下載本地

點擊下載至本地

image.png

拷貝文件

iconfont.cssiconfont.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

user avatar mapvthree 頭像 tyhan 頭像 yangzw 頭像 acfasj 頭像 tnfe 頭像 pingan8787 頭像 axuicn 頭像 yourena_c 頭像 faker_5acebe0256c30 頭像 movestar 頭像 nine_59f82397ef519 頭像 mincloud 頭像
30 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.