要自定義一套屬于自己熟悉的組件庫，圖標(biāo)庫肯定是必不可少的……

在實際開發(fā)過程中，前端與設(shè)計最好協(xié)作的是使用iconfont阿里巴巴矢量圖標(biāo)庫來管理圖標(biāo)。

一是圖標(biāo)庫里有很多可以直接拿來使用的圖標(biāo)，二是提供很方便的圖標(biāo)管理功能。大大提高了前端和設(shè)計師的協(xié)作效率。

image

step 1:

找到iconfont網(wǎng)站的新建按鈕圖標(biāo)，點擊創(chuàng)建一個圖標(biāo)庫。

image

step 2:

從圖標(biāo)庫中選出自己喜歡的圖標(biāo)，添加至購物車。點擊添加到項目按鈕，添加至創(chuàng)建的圖標(biāo)庫。

image

step 3:

在創(chuàng)建的圖標(biāo)庫頁面上，點擊下載至本地，得到一個download,zip壓縮包，解壓至當(dāng)前文件夾，得到目錄如下。

image

step 4:

將文件夾中的iconfont.css打開，復(fù)制其中的代碼于小程序中的icon.wxss中.

image

step 5:

在相應(yīng)的wxml頁面中嵌入如下代碼，即可使用字體圖標(biāo)

<text class=" iconfont iconDollar "></text>

最后附上項目地址：MUI

image

歡迎大家留言評論，本文將長期更新維護…