1. 程式人生 > >微信小程序——引用阿裏雲字體

微信小程序——引用阿裏雲字體

title 技術 htm image 創建 阿裏 log tle 目錄

阿裏圖標官網:http://www.iconfont.cn

使用阿裏雲圖標大致的方法就是:選中你的圖標——保存至你的項目——下載你的圖標項目——在項目中引用字體文件。

具體方法可以參考:引用阿裏雲矢量圖標庫。

我們今天重點是講如何在微信小程序中引用阿裏雲圖標庫。

我們就從你已經下載好了圖標庫說起了。

技術分享圖片

1.把該字體文件及css文件放入到小程序項目中,文件目錄如下圖:

技術分享圖片

2.在app.wxss裏面引入iconfont.wxss

技術分享圖片

3.通過icon引用

技術分享圖片

具體代碼如下:

<icon class="tabbar-icon shishuofont icon-audio-linear"
></icon>

tabbar-icon:我自己定義的class

shishuofont:阿裏雲創建項目時定義的 技術分享圖片

icon-audio-linear:對應的圖標名字

技術分享圖片

最後效果如下圖:

技術分享圖片

是不是 so easy?!

微信小程序——引用阿裏雲字體