小程序模板網(wǎng)

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

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

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

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

 

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

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

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

下載下來,找到ttf格式文件

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

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

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

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

blob.png

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

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

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

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

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

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

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+前后代碼開源 碼云倉庫:starfork
本文地址:http://www.u-renovate.com/wxmini/doc/course/23928.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢
AI智能客服 ×