小程序如何使用阿里 iconfont

需求

需要在小程序中使用字体图标

解决方案

步骤概述

• 在 iconfont 平台创建一个项目，然后添加一些需要的图标进项目中
• 将字体图标下载到本地，然后想办法把 woff 文件转换为 base64 格式的文件
• 在小程序中引入并且使用

过程详解

1. 在 iconfont 平台创建一个项目，然后添加一些需要的图标进项目中

2. 将字体图标下载到本地（这里我选择的图标字体类型为 font class）。然后把 woff 文件转换为 base64 格式的文件。这里是利用了一个在线转换的网站 Online @font-face generator — Transfonter下载过来的文件夹里会有个 CSS 文件，内容大概长这样：
   这个文件的内容可以理解为类似一张 spirit 图（雪碧图）。

3. 在小程序中新建一个 wxss 样式文件，然后把步骤 2 中转换后下载过来的 css 文件内容复制过去，然后再把从 iconfont 平台下载的 css 文件的内容复制过去。注意把从 iconfont 平台的 css 文件中的 font-face 相关内容删除。

4. 在需要使用字体图标的页面引入新建的 wxss 文件，然后按照官方文档的示例使用即可：

   <text class="iconfont icon-nav_home_icon"></text>