微信小程序引入iconfont

### 如何在微信小程序中集成和配置 Iconfont 图标字体

#### 准备工作
为了能够在微信小程序项目里使用 Iconfont 的图标，首先需要注册账号并登录到 [Iconfont](https://www.iconfont.cn/) 平台，在线创建属于自己的图标的集合[^3]。

#### 获取图标代码
挑选好所需的图标之后，可以下载对应的 `iconfont.css` 文件以及获取用于嵌入页面的 `<text>` 标签语法。对于微信小程序而言，通常会采用本地化的方式加载这些资源而不是通过网络请求来提高性能[^2]。

#### 安装 mini-program-iconfont-cli 工具
考虑到直接操作文件可能带来的不便，推荐利用命令行工具 `mini-program-iconfont-cli` 来简化这个过程。安装该工具可以通过 npm 或者 yarn 实现：

npm install -g mini-program-iconfont-cli

或者

yarn global add mini-program-iconfont-cli

此工具能够帮助开发者更方便地管理 iconfont 字体文件，并将其适配至微信小程序环境之中[^1]。

#### 配置与应用
完成上述准备工作后，按照以下步骤继续设置：
- 将下载得到的 `.ttf`, `.woff` 等格式的字体文件放置于项目的合适位置；
- 修改 app.wxss 或 page.wxss 中的相关样式表规则以引用这些字体文件；
- 在 WXML 页面结构内适当的位置加入形如 `<text class="iconfont icon-xxx"></text>` 的标签实例；

具体来说，可以在全局或局部 CSS 文件中添加如下定义以便正确显示图标字符：

@font-face {
  font-family: 'iconfont';
  src: url('/path/to/iconfont.ttf') format('truetype');
}

.iconfont {
  font-family:"iconfont" !important;
}

最后一步就是确保所使用的类名（即这里的 "icon-xxx"）匹配实际上传至 Iconfont 上面的名字空间了。