小程式使用 Iconfont 的正確姿勢
現如今移動裝置解析度不勝列舉，傳統的標量圖示要分別匯出 1 倍圖、2 倍圖、3 倍圖等以適應高分辯率裝置。這無疑大大增加了設計師和客戶端開發的工作量。向量圖以其無損縮放的優點，在圖示方面有著極大的優勢。
Iconfont 是由阿里推出，功能強大且圖示內容很豐富的向量圖示庫，提供向量圖示下載、線上儲存、格式轉換等功能，幾乎國內成了向量圖示庫的事實標準。
每個 Iconfont 專案都可以生成一個遠端.css
檔案，下文以//at.alicdn.com/t/font_883452_bqb4vsc7km8.css
為例。你可以查閱教程瞭解如何生成.css
檔案。
正常 Iconfont 的使用流程是在 HTML 的head
標籤中引入樣式檔案，然後通過類名呼叫圖示
<html> <head> <link href="//at.alicdn.com/t/font_883452_bqb4vsc7km8.css" /> </head> <body> <!-- 這是一個名為 plus 的 icon --> <i class="iconfont icon-plus"></i> </body> </html> 複製程式碼
不幸的是小程式不支援引入外部 css 檔案，為此我尋遍網路，竟沒有找到 Iconfont 在小程式中的正確用法。
本文根據我在實踐經驗所得，是我目前能找到在小程式中使用 Iconfont 最簡的方法。
引入
雖然小程式不支援引入外部樣式表，但.wxss
檔案本質上就是.css
檔案，因此我們可以將 Iconfont 的樣式表儲存到本地的.wxss
中。
-
下載
at.alicdn.com/t/font_883452_bqb4vsc7km8.css至/iconfont.wxss，並在app.wxss中引入@import "/iconfont.wxss"; 複製程式碼
-
在
.wxml檔案中使用<text class="iconfont icon-plus"></text> 複製程式碼
現在應該可以在開發者工具中看到你想要的圖示了。
解決了基本的使用問題之後，我們發現，由於小程式元件內部有獨立的類作用域，因此在app.wxss
中引入的.iconfont
和.icon-plus
並不能在自定義元件內生效，所以你需要在所有需要用到 Iconfont 的元件內，分別引入iconfont.wxss
。
元件化
如果你看過我之前的文章，應該知道我對冗餘程式碼深惡痛絕。自定義元件就是解決重複引入的手段。