Stories

Detail Return Return

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

添加圖標

打開,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 linlinma Avatar zourongle Avatar leexiaohui1997 Avatar huichangkudelingdai Avatar dunizb Avatar xiaolei_599661330c0cb Avatar nqbefgvs Avatar licin Avatar milton Avatar ldh-blog Avatar Asp1rant Avatar jinl9s27 Avatar
Favorites 63 users favorite the story!
Favorites

Add a new Comments

Some HTML is okay.