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