一、iconfont-阿里巴巴矢量圖標庫?下載需要的圖標

1.將想要的圖標添加入庫并下載代碼

?

?二、下載成功后，將得到一個名為 "download.zip" 的文件，然后解壓得到這么一堆文件：

?三、轉換 ttf 文件為 base64

推薦去?https://transfonter.org?轉換

1.配置選項，將配置改為如下紅色框所示，并打開 Base64 encode 選項：

?2.配置完選項，下一步就可以添加ttf文件開始轉換了：

3.選擇剛剛從阿里巴巴 http://iconfont.cn 下載后解壓出來一堆文件中的 ttf 文件：

?4.轉換并下載

?

?5.下載成功后，得到一個名為 "transfonter.org" 開頭的壓縮包，解壓后得到三個文件，然后我們打

開 "stylesheet.css" 文件:

?三、在小程序中使用
1.新建一個小程序項目，成功后可以自己建一個 resource 文件夾用來放字體圖標等資源，并在

resource目錄下新建一個 "style.wxss" 的空白文件，這個wxss就是我們的字體圖標文件：

?2.打開新建的 style.wxss 空白文件，將轉換完成后下載下來的三個文件中 "stylesheet.css" 里面的

內容全部復制過來：

?3.并將最開始從阿里巴巴下載下來解壓后的 "iconfont.css" 打開，把未打叉的部分全部復制到小程

序新建的 "style.wxss" 中：

?4.現在我們的 "style.wxss" 長這樣：

5.那現在可以直接使用了嗎？NO~ ，還需要添加如下一段代碼到 style.wxss 中：

[class^="icon-"], [class*=" icon-"] {/* use !important to prevent issues with browser extensions that change fonts */font-family: 'iconfont' !important;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;/* Better Font Rendering =========== */-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }

?6.最終 style.wxss 如下 （注意兩個綠色框中的 font-family 要一致）：

7.全局引入字體圖標，打開 "app.wxss" ，引入剛剛創建的 style.wxss，就可以在一級路由頁面(也

就是app.json里面pages選項配置的路由頁面)使用了 :

版權聲明：本文為CSDN博主「一個好好的程序員」的原創文章

原創鏈接為? ‘微信小程序引入iconfont字體圖標（阿里巴巴矢量圖標庫）_一個好好的程序員的博客-CSDN博客_微信小程序引入字體圖標’

總結

以上是生活随笔為你收集整理的微信小程序icon图标引入的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。