## 字體圖標 顧名思義就是**可以像字體一樣使用的圖標**，可以隨意修改**大小和顏色**。事實上也確實如此，開發者通過css里的字體屬性：font-size 和 color 就可以控制圖標的大小和顏色，可以像字體一樣隨意放大縮小而不會失真。 現在不管是網頁還是app開發中，字體圖標已經很常見，基本只要能用字體圖標的形式都不會選擇png圖標，同樣，其實小程序開發中也是可以使用字體圖標的。 ## 使用微慕圖標 微慕官方圖標庫：[點此查看](https://at.alicdn.com/t/project/1187166/6e5a2afa-0cdf-4486-a5a1-a4230942b982.html) 1. 進入**微慕官方圖標庫**，點擊**Font class**，可以看到圖標下邊有標示圖標的代碼  2. 在**小程序**里使用: ~~~ <text class="iconfont icon-eye"></text> ~~~ 另外可以增加class來設置**圖標大小font-size**和**圖標顏色color** ## 自定義圖標 #### 流程 注冊[iconfont](https://www.iconfont.cn/)賬號 一> 新建自己的字體圖標項目 一> 添加或者上傳制作好的字體圖標 一> 生成字體圖標css代碼 一> 將代碼復制到小程序中 一> 在標簽中直接按設置好的圖標類名使用 **一、注冊iconfont賬號** 進入[阿里巴巴矢量圖標庫](https://www.iconfont.cn/)，可直接用新浪微博授權登錄  **二、新建自己的字體圖標項目** 1. 點擊頂部菜單欄—資源管理 — 我的項目 2. 點擊右方紅框里的新建項目圖標  3、輸入項目名和項目描述，FontClass/Symbol前綴建議可以修改成有自身特色的如 wm- （為了避免和微慕所使用的 icon- 沖突，文末還會具體說明這個問題）。 其他選項不熟悉具體使用規則的建議不要修改，直接使用截圖上默認的，完成后點擊下方的“新建”按鈕  **三、添加或者上傳制作好的字體圖標** 1. 自己設計上傳圖標 如果自己有設計能力的，可借助ps、ai等設計工具自己制作矢量圖標上傳，點擊紅框內的“上傳圖標至項目”即可根據操作提示上傳。  2. 使用別人公開分享的圖標 （1）直接在頂部搜索框內搜索要使用的圖標關鍵字，找到合適的圖標后光標放到圖標上會出現一個操作菜單，點擊第一個“購物車”可將當前圖標加入到購物車內  （2）找到所有想使用的圖標后，點擊網站右上角的“購物車”圖標會彈出如下截圖的操作菜單，然后選擇要將圖標加入的項目，點擊確定按鈕  （3）再回到新建的項目里就能看到剛添加的所有圖標，鼠標放到圖標上同樣會出現操作菜單，可編輯當前圖標  （4）點擊”鉛筆“可編輯圖標，只用修改紅框內圖標的類名，可以改成圖標對應的英文，主要是方便后期查找和維護，在這里編輯的類名會被自動加上新建項目時設置的：FontClass/Symbol 前綴，如下圖中的圖標設置的類名是 bill，實際使用時需要寫成 icon-bill。  需要注意類名不能重復，這里設置的類名即是在小程序中使用時需要寫到標簽上的類名，所有圖標通過此類名來進行區分。 **四、生成字體圖標css代碼** 1. 點擊“暫無代碼，點擊生成”，會自動生成需要的代碼，生成成功后會出現旁邊的代碼鏈接，注意每次修改、新增、刪除圖標后都需要重新生成新的代碼，點擊出現的提示“點擊更新代碼”這幾個文字即可重新生成  2. 復制鏈接（最前面的那兩個 // 不要復制，直接點擊那個鏈接也會自動跳轉），然后在瀏覽器中打開，就會看到如下圖中的代碼，然后全選復制  **五、將代碼復制到小程序中** 1. 在小程序里新建一個wxss文件，將復制的字體圖標代碼粘貼到里面，然后保存 字體圖標文件建議放到小程序中 images/iconfont 目錄下，微慕官方的字體圖標文件是此目錄下的 iconfont.wxss（不建議去做任何修改），需要引入其他自定義字體圖標的，可在此目錄下新建一個自己的 wxss 自行維護，如：wm-iconfont.wxss  2. 在小程序全局樣式文件 app.wxss 中引入字體圖標文件 在app.wxss中引入后即可在小程序的頁面中直接使用： @import "images/iconfont/iconfont.wxss"; @import "images/iconfont/wm-iconfont.wxss";  **六、在小程序頁面中使用字體圖標** 在需要使用字體圖標的地方輸入如下標簽即可：，其中 icon-bill 是區分具體要使用的哪個圖標，示例中將在頁面中插入“賬單”圖標，同時你可以在頁面對應的wxss文件中通過 .icon-bill 類名選中標簽，再 font-size 和 color 屬性來控制圖標的大小和顏色  **\* 注意事項** 1. 通過全局搜索 iconfont icon- 可以搜索到小程序中所有使用字體圖標的地方，需要修改成自己想要的自定義圖標時，直接覆蓋掉wxml里的字體圖標代碼即可 2. 自定義的字體圖標注意類名不要和微慕官方使用的重復，重復后會出現沖突造成覆蓋，微慕官方使用的類名前綴是 icon-，建議自己新建項目時可以換一個其他前綴如 wm-，注意具體使用時也需要用此前綴，比如想引入一個新的賬單圖標就要寫成：&lt;text class="iconfont wm-bill" /&gt;