1. 程式人生 > >微信小程式使用阿里巴巴字型圖示

微信小程式使用阿里巴巴字型圖示

第一步:去iconfont下載所需要的字型圖示

 進入阿里圖示官網http://iconfont.cn/,新增自己所需要的圖示,然後點選下載程式碼,解壓出來如下:

 第二步:轉換.ttf檔案

 進入https://transfonter.org/平臺,將解壓出來的.ttf字型檔案轉化成base64格式。流程如下:

 點選下載,解壓可以得到如下圖的幾個檔案:

第三步:微信小程式中使用

 1、開啟剛剛經過轉換過的stylesheet.css,將其中的內容全部複製到微信小程式中需要用到的wxss檔案中(建議放在公共樣式app.wxss)。

2、開啟沒有轉換過的download.zip解壓出來的檔案,找到iconfont.css檔案,複製紅色框住的到 app.wxss

附上全部程式碼

3、在.wxml中使用字型圖示


<text class="iconfont icon-jijianfasong" style='font-size:40px;color:red'></text>

字型圖示跟字型一樣,可以通過font-size來改變大小,通過指定color來改變他的顏色。

總結:到這裡微信小程式的字型圖示的使用就完成了,這裡經過轉換成64位編碼之後,直接將樣式放在css檔案中即可,並不需要引入其他以外的檔案,相當簡潔。