微信小程式引入圖示字型Font Awesome

weixin_34075551發表於2018-03-09
微信小程式
  1. 下載Font Awesome包，連結：Font Awesome中文官網

  2. 開啟下載的包，找到.ttf檔案


    10954635-8a8a3c99e87f1ced.png
    image.png
  3. 開啟字型上傳轉換網址 https://transfonter.org/，新增.ttf檔案,選擇base 64編碼，上傳即可
    10954635-daf9fc159c340a6d.png
    image.png

    4.下載上傳的檔案包
    10954635-223f689965e803b5.png
    image.png

    5.開啟下載檔案下的stylesheet.css檔案，複製程式碼到app.wxss檔案下
    10954635-218a9fecf089b159.png
    image.png

    6.開啟下載的Font Awesome包，找到font-awesome.css檔案，複製內容，去掉@font-face 程式碼，其餘的程式碼複製到app.wxss檔案下。這樣就可以全域性使用Font Awesome圖示字型啦~
    10954635-dd803e411845c0ee.png
    image.png

    注：
    1、這裡是把字型程式碼放在全域性的app.wxss檔案下，也可以放在自己定義的其他.wxss檔案中，引用即可。
    2、由於我用的是font Awesome字型，這裡只提到font Awesome字型的引用方式，像iconfont字型也是可以類似引入的，如有需要請自行查詢。

相關文章