在微信小程序开发中，由于平台对线上资源的安全域名限制，我们无法像 Web 项目那样直接通过在线链接引入阿里的 IconFont 图标库。虽然阿里矢量图库近期恢复了部分功能，但为了防止后续维护导致链接失效，采用本地离线方案更为稳妥。
一、在线链接方式（参考）
如果暂时使用在线链接，需要注意每次新增图标后必须更新外部样式链接。操作时点击'下载至本地'获取字体包，打开自定义的 iconfont.css 文件，将其中选中的部分替换为最新的在线链接即可。随后在 app.wxss 中引入该 CSS 文件，最后在页面的 WXML 中使用 <text class="iconfont icon-xxx"></text> 调用图标。
二、离线 Base64 方案（推荐）
当无法获取在线链接或需要更稳定的方案时，我们需要将远程路径转换为 Base64 格式。这是因为小程序限制了接口安全域名，Base64 内联可以绕过这一限制。
1. 下载并转换字体
首先下载字体图标压缩包，解压后找到 .ttf 文件。推荐使用 Transfonter 工具进行格式转换：
- 打开转换网站，勾选 "Base64 encode" 选项，上传 TTF 文件。
- 点击 "Convert" 进行转换，完成后下载生成的压缩包。
- 解压后你会得到包含
stylesheet.css的文件，复制其中的内容。
2. 替换样式配置
在项目中打开自定义的 iconfont.css 文件，将原有的 @font-face 和 .iconfont 代码段替换为刚才复制的内容。注意这里涉及两段关键代码的替换。
/* 示例：替换后的 @font-face 结构 */
@font-face {
font-family: 'iconfont'; /* Project id 123456 */
src: url('data:application/x-font-ttf;charset=utf-8;base64,AA...');
}
3. 补充全局字体声明
完成上述替换后，可能还无法正常使用，因为缺少全局字体声明。需要在 app.wxss 或全局样式文件中添加以下代码，确保所有类名包含 icon- 的元素都能正确识别字体：
[class^="icon-"], [class*=" icon-"] {
font-family: 'iconfont' !important;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-: grayscale;
}
