微信小程序使用字體圖標(biāo)
開發(fā)微信小程序時(shí)，難免要用到字體圖標(biāo)，而微信小程序的樣式中是不能直接寫本地的的圖標(biāo)文件地址，只能用線上絕對(duì)地址或轉(zhuǎn)為bese64，這點(diǎn)很不方便。網(wǎng)上找來(lái)了一篇《使用阿里圖標(biāo)為例子講解如何在微信小程序中使用字體圖標(biāo)》。
第一步：下載需要的字體圖標(biāo)
進(jìn)入阿里圖標(biāo)官網(wǎng)http://iconfont.cn/搜索自己想要的圖標(biāo)，如這里需要一個(gè)購(gòu)物車的圖標(biāo)，流程為：
搜索“購(gòu)物車”圖標(biāo)—>點(diǎn)擊“添加入庫(kù)”–>點(diǎn)擊購(gòu)物車進(jìn)入購(gòu)物車–>點(diǎn)擊下載代碼按鈕。
點(diǎn)擊下載代碼，將得到名為download.zip的壓縮包，解壓將看到以下內(nèi)容：
第二步：轉(zhuǎn)換ttf文件
進(jìn)入https://transfonter.org/平臺(tái)，將解壓出來(lái)的ttf字體文件轉(zhuǎn)化成base64格式。流程如下：
點(diǎn)擊下載，得到轉(zhuǎn)換后的壓縮包，名為transfonter.org-開頭。解壓可以得到如下圖的幾個(gè)文件：
第三步：在微信小程序中使用
新建微信小程序，將默認(rèn)生成的代碼刪除。
1–在index.css文件中添加樣式內(nèi)容。打開剛剛我們經(jīng)過(guò)轉(zhuǎn)換的解壓出來(lái)的文件，找到stylesheet.css，將其中的內(nèi)容全部復(fù)制到index.css文件中。注意是轉(zhuǎn)換過(guò)的那個(gè)文件。
2–打開沒(méi)有轉(zhuǎn)換過(guò)的download.zip解壓出來(lái)的文件，找到iconfont.css文件，將這個(gè)文件中的沒(méi)有打岔的內(nèi)容復(fù)制到index.css文件中。@font-face這部分不要，只要下邊的這部分。
3–在index.wxml中使用字體圖標(biāo)。代碼如下：<!–index.wxml–>
<view class=”container”>
個(gè)人中心
<text class=”iconfont icon-wode” style=”font-size:50px;color:red”></text>
</view>
效果如下：
字體圖標(biāo)跟字體一樣，可以通過(guò)font-size來(lái)改變大小，通過(guò)指定color來(lái)改變他的顏色。
總結(jié)：到這里微信小程序的字體圖標(biāo)的使用就完成了，這里經(jīng)過(guò)轉(zhuǎn)換成64位編碼之后，直接將樣式放在css文件中即可，并不需要引入其他以外的文件，相當(dāng)簡(jiǎn)潔。
