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就好啦,

 

謝謝觀看 ,