微信小程序使用字體圖標庫

在微信小程序項目中需要用到字體圖標，所以記錄一下解決過程。因爲比較喜歡使用阿里巴巴矢量圖標庫，就以此爲例來說。

一、去阿里巴巴矢量圖標庫下載需要的圖標

進入https://www.iconfont.cn/，在我的項目中添加自己需要的圖標，具體如下

搜索圖標後，添加至項目

   

將項目下載至本地並解壓

二、轉換ttf文件

將解壓後得到的ttf文件拿到https://transfonter.org/進行轉換，轉換步驟如下圖片所示

下載轉換後的文件

三、在微信小程序中使用

解壓下載後的文件，在編輯器中打開

將其中的內容複製到微信小程序的wxss文件中

再打開之前在阿里巴巴矢量圖標庫中下載的文件

打開上圖css文件，將下圖框中的代碼複製到微信小程序wxss文件中

最後在微信小程序wxml中的class中引用即可，如圖，代碼如下

<view class="hot-like">
     <text class="iconfont iconbuoumaotubiao44 hot-collection"></text>
     <text class="iconfont iconpinglun hot-comments"></text>
</view>