网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網

微信小程序使用字體圖標的方法iconfont

發布時間:2018-04-23 11:57 所屬欄目:小程序開發教程

開發微信小程序,想引入漂亮的圖標,在阿里巴巴上直接引入之后總是報錯,

總算從網上找到解決方法,親測有效,

 

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

微信小程序使用字體圖標的方法iconfont1

微信小程序使用字體圖標的方法iconfont2

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

微信小程序使用字體圖標的方法iconfont3

二、到這個平臺https://transfonter.org/,把剛才下載的ttf字體文件轉化成base64格式

微信小程序使用字體圖標的方法iconfont4

點擊Download下載下來:

blob.png

微信小程序使用字體圖標的方法iconfont6

打開stylesheet.css文件,復制這些內容:

微信小程序使用字體圖標的方法iconfont7

三、把剛才復制的粘貼到wxss文件中

微信小程序使用字體圖標的方法iconfont8

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

blob.png

也復制這些內容到wxss文件中:

blob.png

微信小程序使用字體圖標的方法iconfont11

四、在wxml加入字體

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

微信小程序使用字體圖標的方法iconfont12

五、顯示效果

微信小程序使用字體圖標的方法iconfont13

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



易優小程序(企業版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://www.xiuhaier.com/wxmini/doc/course/23928.html 復制鏈接 如需定制請聯系易優客服咨詢:800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×