商城系統(tǒng) 注冊(cè)

微信小程序如何使用矢量圖標(biāo)

2020-09-27|HiShop
導(dǎo)讀:微信小程序如何使用矢量圖標(biāo),以阿里巴巴矢量圖標(biāo)為例: 方法:轉(zhuǎn)化為base64 第一步:在阿里巴巴矢量圖標(biāo)庫(kù)下載需要的圖標(biāo) 點(diǎn)擊下載代碼,將下載后的...

微信小程序如何使用矢量圖標(biāo),以阿里巴巴矢量圖標(biāo)為例:

方法:轉(zhuǎn)化為base64

第一步:在阿里巴巴矢量圖標(biāo)庫(kù)下載需要的圖標(biāo)

點(diǎn)擊下載代碼,將下載后的download.zip解壓

第二步:進(jìn)入https://transfonter.org/平臺(tái),將ttf格式轉(zhuǎn)化為base64格式,轉(zhuǎn)化完畢下載

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

打開剛剛我們經(jīng)過轉(zhuǎn)換的解壓出來(lái)的文件,找到stylesheet.css,將其中的內(nèi)容全部復(fù)制到wxss文件中(在哪使用在哪加入)。

打開沒有轉(zhuǎn)化過的download文件中的iconfont.css文件,將中除了@font-face部分的其他所有代碼復(fù)制到wxssz中.

在wxml中使用字體圖標(biāo)直接使用class即可(在wxss中每個(gè)字體圖標(biāo)對(duì)應(yīng)一個(gè)class)。

3微信小程序如何使用回調(diào)函數(shù)

電話咨詢 預(yù)約演示 0元開店