微信小程序中使用字体图标需要将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>
到此运行可看到图标正常显示: