微信小程序中iconfont的用法详解「附代码」

1、什么是iconfont

iconfont 是一种网络字体的技术，将图标使用 @font-face 技术加载，并使用 Unicode 进行管理。使用 iconfont 的好处是可以根据自己的喜好，将多个 icon 组合成一个新的 icon，并且不用担心失真问题，因为iconfont不同于img标签，它的图标是使用矢量图的方式绘制，可以任意缩放或拉伸。

2、如何使用iconfont

2.1 注册iconfont账号

在使用iconfont之前，需要先到iconfont官网注册账号。

在iconfont的官网中，单击右上角的“注册”按钮，进行账号注册，注册完成后登录到首页。

2.2 搜索icon图标

在iconfont首页中，输入关键词搜索需要的icon图标，然后添加至“购物车”。

2.3 将iconfont引入到项目中

将购物车中选中的 iconfont 引入到项目中，下载完成后，将整个文件夹(包含 iconfont.css 在内) 的内容放入项目的某个文件夹中。

在 HTML 中使用 icon，需要先导入 iconfont.css，并在 HTML 中使用 class 属性指定 icon 对应的 class 名称。

2.4 在微信小程序中使用iconfont

在微信小程序中使用 iconfont，同样需要按照 2.3 步骤将 iconfont 引入到项目中，在页面的 JSON 文件中，添加如下配置：

{

  "usingComponents": {
    "i-icon": "/iconfont/iview-runtime/i-icon/i-icon"
  }
}

在使用的页面中，使用 i-icon 组件，并指定相应的 type 和 size。

<i-icon type="{{iconType}}" size="{{iconSize}}"></i-icon>

2.5 修改icon颜色

如果需要修改 icon 的颜色，需要指定相应的 CSS 样式。

.icon {
  color: #333; /* 修改为灰色 */
}

3、代码示例

以实现一个微信小程序上的图标列表为例，展示如何使用 iconfont。

首先，在购物车中选中所需的 icon，并将其下载下来。将下载的 iconfont.css 文件放入项目的 /style 目录下，并在 app.wxss 中导入该文件。

/* app.wxss */

@import "./style/iconfont.css";

然后，在需要使用 icon 的页面中，添加 i-icon 组件，并在相应的 wxml 中指定 type 和 size。

// demo.wxml

<view class='icon-list'>
  <view class='icon-item' bindtap='handleTap'>
    <i-icon type='icon-rocket' size='40rpx'></i-icon>
    <text>火箭</text>
  </view>
  <view class='icon-item' bindtap='handleTap'>
    <i-icon type='icon-music' size='40rpx'></i-icon>
    <text>音乐</text>
  </view>
  // 其他 icon ...
</view>
// demo.js
Page({
  data: {
    iconType: 'icon-rocket',
    iconSize: '40rpx',
  },
  handleTap() {
    // 切换 icon 类型
    this.setData({
      iconType: 'icon-music',
    });
  },
})

最后，为 icon 指定相应的 CSS 样式即可。

/* demo.wxss */

.icon {
  color: #007aff;
}

4、总结

iconfont 是一种比较流行的图标管理方案，可以方便地组合和使用各种图标，并且兼容性较好。

在微信小程序中使用 iconfont 所需要的配置也比较简单，只需要按照以上步骤进行即可。

需要注意的是，在使用 iconfont 时要注意版权问题，不要随意使用他人的图标资源。