在微信小程序开发中，由于平台对线上资源的安全域名限制，我们无法像 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-font-smoothing: grayscale;
}
4. 页面使用示例
配置完成后，即可在任意页面的 WXML 中正常渲染图标。下面是一个简单的列表展示示例，展示了如何结合业务数据与图标显示：
<view class="padding-20-0 m-t-100 bgc">
<view wx:if="{{safetyEmps.length}}">
<view wx:key="this" wx:for="{{safetyEmps}}" class="mrg-0-10 {{index !== 0 ? 'm-t-30' : ''}}">
<view class="font30 fontB padding20 colorfff" style="background-color: {{index % 2 == 0 ? '#0062D9' : '#5C75F2'}};">
{{item.ename}}
</view>
<view class="flex-wrap text-right space-around m-t-10">
<view class="w50p padding20 bgc border-box position-r {{index % 2 == 0 ? 'item' : 'item2'}}">
<view>今年计划投入<text class="font20">（万元）</text></view>
<view class="fontB font36 m-l-15p m-t-10">{{fn.transInput(item.sumMoney)}}</view>
<text class="iconfont icon-lvzhou_zongshu font70 theme-color posi-br"></text>
</view>
<view class="w50p padding20 bgc border-box position-r {{index % 2 == 0 ? 'item' : 'item2'}}">
<view>今年实际支出<text class="font20">（万元）</text></view>
<view class="fontB font36 m-l-15p m-t-10">{{fn.transInput(item.siOut)}}</view>
<text class="iconfont icon-a-touruzhichu theme-color font70 posi-br"></text>
</view>
</view>
</view>
</view>
<view class="text-center padding20 bgc" wx:else>
请选择企业
</view>
</view>
至此，离线引入方案已处理完毕。相比在线链接，这种方式不受第三方网站维护影响，更适合生产环境长期使用。
