微信小程序中如何使用字体图标

在 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