微信小程序中引入iconfont图标

1、登录到阿里巴巴矢量图标库，新建一个项目，把自己需要用到的图标放进新建的项目中。

2、找好完以后，进入到项目，点击下载到本地。然后解压download文件。解压出来把后缀名为.ttf的文件拿出来

3、网站登录https://transfonter.org/，进去后点击增加了addFont按钮。将刚才提取出来的.ttf的格式放进去

https://transfonter.org/网站

4、把base64这个打开。然后点击convert，成功后将转换好的文件下载到本地。、里面有个stylesheet文件。

image.png image.png image.png

5、在小程序项目的根目录下新建个iconfont.wxss文件，然后将stylesheet。css里面的代码复制到项目里的iconfont.wxss。

image.png

6、在每个.wxss里文件里引入，代码如下：

（1）在 .wxml为后缀的文件中

<view class="icons icon_like"></view>

（2）在.wxss为后缀的文件中

@import "../../iconfont.wxss" //导入iconfont的样式
.icon_like{
  content:"\e687";  //在矢量图标中的命名
  font-size: 14px;
}