微信小程序如何使用fontawesome字體庫?

最近,作一個小程序項目,涉及到fontawesome字體庫的使用。然而,微信小程序沒法直接引用外部的字體庫,通過google一下,發現一個網友提供了可行的方案,在此很是感謝原文做者貢獻,讓咱們少走彎路
原文連接:http://www.javashuo.com/article/p-fcyzdlfp-nb.htmlcss

如下是我根據原做者的方法,本身親自操做一遍,方法可行(文章最後有幾張圖片也是原文圖片,忘記小程序appkey,沒法登陸演示截圖,不過,不影響實現流程(*^▽^*))!!!小程序

  • 一、下載字體包

下載地址:http://fontawesome.dashgame.com/微信小程序

  • 二、將下載的字體庫壓縮包解壓,在 fonts 文件下,找到 .ttf 文件

選擇base64 編碼 ,convert後下載微信

下載app

  • 四、將下載的文件解壓,找到 stylesheet.css

  • 五、將打開的文件,複製到小程序中的 app.wxss

  • 六、在步驟【1】中 css 文件下,找到 font-awesome.css ,而後去掉內容中的 @font-face 部分,再複製到微信小程序中的 app.wxss 中,放在步驟【5】中內容的後面便可

  • 七、小程序中直接引用便可顯示對應字體圖標

測試代碼 :<text class="fa fa-camera-retro fa-lg">圖標</text>xss

相關文章
相關標籤/搜索