網(wǎng)站圖標(biāo)要想做到清晰無鋸齒僵缺，使用普通圖片或者雪碧圖都很難達(dá)到這個(gè)目的获三，一般我們都會(huì)引入字體圖標(biāo)（svg轉(zhuǎn)font，使用圖標(biāo)像使用字體一樣梳凛，詳見《web頁面使用字體圖標(biāo)》）耿币，那么如何在微信小程序中使用自定義圖標(biāo)呢？請(qǐng)看詳細(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)
