微信小程序使用字体图标库

在微信小程序项目中需要用到字体图标，所以记录一下解决过程。因为比较喜欢使用阿里巴巴矢量图标库，就以此为例来说。

一、去阿里巴巴矢量图标库下载需要的图标

进入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>