微信小程序引入字体图标

微信小程序中使用字体图标需要将ttf文件编码为base64才能使用。网上查一般使用：https://transfonter.org/，进行在线转换，我在使用该网站时，无法成功上传文件，只能想别的办法。

使用https://www.motobit.com/util/base64-decoder-encoder.asp该网站编码ttf文件

一、准备好自己的字体图标库

例如：https://icomoon.io/app/#、或者阿里巴巴字体图标库，在这些网站上生成自己需要的图标库之后下载文件，解压后文件结构如下：

需要关注的是font文件和style.css文件。如果在一般网页使用，则直接将font文件夹以及style.css文件剪切到自己的项目文件中去，即可通过添加对应类名使用字体图标。

二、ttf转码base64

在  https://www.motobit.com/util/base64-decoder-encoder.asp  网站里打开font文件下的.ttf文件：

转换完的base64编码段是带有换行符的，我们需要将换行符消除，可使用sublime text3或者其他ide进行正则匹配消去:

三、制作字体图标css文件

对style.css进行备份（怕整坏哈），接下来对style.css进行修改：

主要修改成这样：

@font-face {
  font-family: 'wxmemo-icon';

src:url(data:font/truetype;charset=utf-8;base64,base64编码段) format('truetype');

}

修改后截图：

之后可以将修改后的style.css文件引入自己的项目中，使用代码：

<span class="icon icon-abandon"></span>

到此运行可看到图标正常显示：