小程序中使用阿里圖標庫iconfont
項目中常常需要使用到字體圖標,微信小程序中使用字體圖標與在平常的web前端中類似但是又有區別。下面以使用阿里圖標為例子講解如何在微信小程序中使用字體圖標。
第一步:下載需要的字體圖標
進入阿里圖標官網http://iconfont.cn/搜索自己想要的圖標,如這里需要一個購物車的圖標,流程為:
搜索“購物車”圖標--->點擊“添加入庫”-->點擊購物車進入購物車-->點擊下載代碼按鈕。
點擊下載代碼,將得到名為download.zip的壓縮包,解壓將看到以下內容:
第二步:轉換ttf文件
進入https://transfonter.org/平台,將解壓出來的ttf字體文件轉化成base64格式。流程如下:
點擊下載,得到轉換后的壓縮包,名為transfonter.org-開頭。解壓可以得到如下圖的幾個文件:
第三步:在微信小程序中使用
新建微信小程序,將默認生成的代碼刪除。
1--在index.css文件中添加樣式內容。打開剛剛我們經過轉換的解壓出來的文件,找到stylesheet.css,將其中的內容全部復制到index.css文件中。注意是轉換過的那個文件。
2--打開沒有轉換過的download.zip解壓出來的文件,找到iconfont.css文件,將這個文件中的內容復制到index.css文件中。@font-face這部分不要。
3 --在index.wxml中使用字體圖標。代碼如下:
<!--index.wxml--> <view class="container"> 個人中心 <text class="iconfont icon-wode" style="font-size:50px;color:red"></text> </view>
字體圖標跟字體一樣,可以通過font-size來改變大小,通過指定color來改變他的顏色。
總結:到這里微信小程序的字體圖標的使用就完成了,這里經過轉換成64位編碼之后,直接將樣式放在css文件中即可,並不需要引入其他以外的文件。