本身製做微信小程序使用base64字體圖標

問題：

1.微信小程序不能隨意使用網絡資源，如字體,css文件等

2.不能在小程序中使用字體文件

3.不能使用background-position背景圖片定位來使用內部png圖片

下面就介紹一下如何製做base64字體圖標。

簡易方式：

經過兩個在線工具，很容易地生成base64加密的字體圖標。

第一步：在線選擇圖標，生成字體及CSS文件

瀏覽器打開：https://icomoon.io/app/#/select

選擇圖標。以爲不夠的話，在頁面左下角點擊"Add Icon From Library..."，添加字體庫，能夠選擇免費的，經常使用的如FontAwsome字體。
選擇圖標
選擇好圖標後，點擊頁面右下角「Generate Font」 ->Download，下載字體文件包icomoon.zip
生成圖標

第二步：在線轉換base64編碼字體

解壓icomoon.zip

瀏覽器打開：https://transfonter.org/
轉換字體
點擊「Add Fonts"按鈕，上傳解壓文件夾中的字體文件：fonts/icomoon.ttf

在下面選項中，將Family support，Base64 encode兩項設置爲On，Formats一欄可只勾選woff2(生成文件的字節數少)

點擊」Convert「按鈕後，會在下面出現一個download連接，點擊下載（transfonter.org-20180805-033630.zip）

第三步：合成小程序使用的 .wxss文件

在小程序工程中新建圖標字體樣式文件，如common/icons.wxss

打開第二步下載的文件包中的stylesheet.css，將@font-face內容拷貝到小程序的icons.wxss中

打開第一步下載的文件包中的style.css，將[class^="icon-"] 及如下的內容拷貝到icons.wxss中

第四步：使用字體圖標

在wxml文件中使用view標籤或image標籤，添加class爲wxss文件中的類名便可，若須要改變圖標字體大小能夠經過font-size來改變：

<view class='icon-search' style='font-size:64rpx'></view>

後記：

有些字體圖標顯示不出來，多是轉換字體時的輸出選項有關。

DIY圖標字體

主要是採用字體制做工具，如Fontforge等製做矢量字體文件，而後能夠藉助icomoon.io網站導入，後面的步驟就與前面描述的同樣了。