小程序模板網(wǎng)

微信小程序使用字體圖標(biāo)的方法iconfont

發(fā)布時(shí)間:2018-04-23 11:57 所屬欄目:小程序開(kāi)發(fā)教程

開(kāi)發(fā)微信小程序,想引入漂亮的圖標(biāo),在阿里巴巴上直接引入之后總是報(bào)錯(cuò),

總算從網(wǎng)上找到解決方法,親測(cè)有效,

 

一、先到阿里巴巴矢量圖標(biāo)庫(kù)(http://iconfont.cn/),用微博帳號(hào)登錄,搜索你想要的圖標(biāo),然后添加入庫(kù)微信小程序使用字體圖標(biāo)的方法iconfont0

微信小程序使用字體圖標(biāo)的方法iconfont1

微信小程序使用字體圖標(biāo)的方法iconfont2

下載下來(lái),找到ttf格式文件

微信小程序使用字體圖標(biāo)的方法iconfont3

二、到這個(gè)平臺(tái)https://transfonter.org/,把剛才下載的ttf字體文件轉(zhuǎn)化成base64格式

微信小程序使用字體圖標(biāo)的方法iconfont4

點(diǎn)擊Download下載下來(lái):

blob.png

微信小程序使用字體圖標(biāo)的方法iconfont6

打開(kāi)stylesheet.css文件,復(fù)制這些內(nèi)容:

微信小程序使用字體圖標(biāo)的方法iconfont7

三、把剛才復(fù)制的粘貼到wxss文件中

微信小程序使用字體圖標(biāo)的方法iconfont8

四、打開(kāi)之前在阿里巴巴下載的壓縮包,找到iconfont.css文件,打開(kāi)它

blob.png

也復(fù)制這些內(nèi)容到wxss文件中:

blob.png

微信小程序使用字體圖標(biāo)的方法iconfont11

四、在wxml加入字體

1
<span class="iconfont icon-jiahao"></span>

微信小程序使用字體圖標(biāo)的方法iconfont12

五、顯示效果

微信小程序使用字體圖標(biāo)的方法iconfont13

提示:截圖中的代碼和演示效果可能不同



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://m.u-renovate.com/wxmini/doc/course/23928.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢
AI智能客服 ×