網(wǎng)站圖標(biāo)要想做到清晰無鋸齒，使用普通圖片或者雪碧圖都很難達(dá)到這個目的，一般我們都會引入字體圖標(biāo)（svg轉(zhuǎn)font，使用圖標(biāo)像使用字體一樣，詳見《web頁面使用字體圖標(biāo)》），那么如何在微信小程序中使用自定義圖標(biāo)呢？請看詳細(xì)步驟：

1、從阿里圖庫上選擇喜歡的圖標(biāo)加入購物車，在購物車彈窗中點(diǎn)擊“下載代碼”后，解壓

阿里圖庫 加入購物車

購物車 下載代碼

圖標(biāo)文件內(nèi)容

2.、進(jìn)入transfonter導(dǎo)入第1步得到的iconfont.ttf文件，打開“Base64 encode”開關(guān)（Family support是默認(rèn)打開的），勾選“TTF”選項(xiàng)（僅這一項(xiàng)，其他選項(xiàng)取消勾選）

transfonter設(shè)置

3、點(diǎn)擊“√Convert”按鈕，點(diǎn)擊“Download”下載壓縮包，解壓

下載transfonter

transfonter文件內(nèi)容

4、打開第2步得到的stylesheet.css文件，全選復(fù)制，替換第1步得到的iconfont.css文件中的@font-face{……}代碼

代碼替換

5、將第3步得到的css文件重命名為iconfont.wxss，放入小程序utils目錄

重命名為iconfont.wxss

6、在app.wxss文件頂部引入字體樣式文件：@import "./utils/iconfont.wxss";

app.wxss引入字體樣式

7、完成！

成功展示自定義圖標(biāo)