uni-app引入iconfont字體圖標

 

1 首先進入你的iconfont項目

很好, 看見圈圈的嗎 , 我說藍色的,記住了,選到這個 ,然后點擊下載本地項目,

解壓完就是這個了 ,然后把

 

 圈起來的放到你的項目文件里面 ,記得引入的時候路徑別錯了,隨便放,引入路徑對了就行

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

進入這個網站, 然后把剛剛解壓的文件打開 找到

找不到?打死你 重新去官網下載,

然后把這個文件移入到桌面后, 打開上個網站選擇文件選擇剛剛你移入的那個iconfont.ttf

點擊全選復制,

3 在項目里面打開剛剛放入的iconfont.css

@font-face { 
  font-family: "iconfont"; 
  src: url(data:font/truetype;charset=utf-8;base64, 轉換的base64內容 ) format('truetype'); 
} 

　

 

把你自己文件的那個@font-face刪除, 然后引入上面的代碼 , 看見沒圈起來的就是放你剛剛全選內容,這樣字體倒是引入進來了, 然后你在APP.vue里面引入這個iconfont.css就好啦,

 

謝謝觀看 ,