在 h5 中我们使用 icoMoon 的字体图标都很简单,直接在 icomoon 的官网 https://icomoon.io 下载成 font 格式即可
然后再在 less 或是 css 文件中引入就好了.
但是在小程序中这样是不可以的,如果我们按照之前的方式引入,在模拟器中可能会正常显示字体图标,但是在真机中字体图标是不能正常显示的,控制台中还会抛出类似如下错误.
在小程序中我们需要将字体转成 base64 格式的再使用.
1. 下载需要字体图标
我们需要先在 icomoon 站上下载我们需要的字体图标.
2. 在线转换 base64 编码的字体
解压 icomoon(2).zip
浏览器打开：https://transfonter.org/ 转换字体
点击“Add Fonts" 按钮,上传解压文件夹中的字体文件：fonts/icomoon.ttf
在下面选项中，将Family support，Base64 encode两项设置为On，Formats一栏可只勾选 woff2 (生成文件的字节数少)
点击 "Convert" 按钮后,会在下面出现一个download链接,点击下载.
3. 合成小程序使用的 .wxss文件
打开 2 中下载的文件包中的 stylesheet.css，将@font-face内容拷贝到小程序的 app.wxss 中
打开 1 中下载的文件包中的 style.css，将[class^="icon-"] 及以下的内容拷贝到 app.wxss 中
4. 使用字体图标
在wxml文件中使用标签,添加 class 为 wxss 文件中的类名即可：
也支持原生写法
.index-swiper .v-search-input::before { content: 'e90d'; font-family: 'icomoon'; margin-right: 15rpx;}参考文章
https://segmentfault.com/a/1190000015892063?utm_source=tag-newest
