小程序使用阿里巴巴TTF字體文件以及圖標

轉話地址https://transfonter.orgcss

 

第一步:下載須要的字體圖標html

進入阿里圖標官網http://iconfont.cn/搜索本身想要的圖標,如這裏須要一個購物車的圖標,流程爲:小程序

搜索「購物車」圖標--->點擊「添加入庫」-->點擊購物車進入購物車-->點擊下載代碼按鈕。微信小程序

點擊下載代碼,將獲得名爲download.zip的壓縮包,解壓將看到如下內容:微信

第二步:轉換ttf文件xss

進入https://transfonter.org/平臺,將解壓出來的ttf字體文件轉化成base64格式。流程以下:字體

點擊下載,獲得轉換後的壓縮包,名爲transfonter.org-開頭。解壓能夠獲得以下圖的幾個文件:編碼

第三步:在微信小程序中使用3d

新建微信小程序,將默認生成的代碼刪除。code

1--在index.css文件中添加樣式內容。打開剛剛咱們通過轉換的解壓出來的文件,找到stylesheet.css,將其中的內容所有複製到index.wxss文件中。注意是轉換過的那個文件。(這裏或者本身創建一個wxss文件 將相關內容加上去)而後在相關界面的wxss裏面導入。@import "../../utils/stylesheet.wxss"

2--打開沒有轉換過的download.zip解壓出來的文件,找到iconfont.css文件,將這個文件中的沒有打岔的內容複製到index.css文件中。@font-face這部分不要,只要下邊的這部分。

 

3--在index.wxml中使用字體圖標。代碼以下:

 

 

效果以下:

 

 

字體圖標跟字體同樣,能夠經過font-size來改變大小,經過指定color來改變他的顏色。

 

總結:到這裏微信小程序的字體圖標的使用就完成了,這裏通過轉換成64位編碼以後,直接將樣式放在css文件中便可,並不須要引入其餘之外的文件,至關簡潔。

相關文章
相關標籤/搜索