详解:微信小程序中使用 iconfont 字体图标

6,208 阅读6分钟

前言

网上关于字体图标使用方式的介绍文章很多,本篇文章主要是我在日常的微信小程序项目中对阿里字体图标库 iconfont 使用上的一些介绍与总结,如您已了解过其在 web 中的使用,可跳至第三节开始阅读。

一、字体图标介绍

脱胎于 web 的微信小程序从诞生起就支持 iconfont 字体图标,毕竟字体图标也是一种字体,只是设计成了图标的形式,与常用的宋体、微软雅黑等字体别无二致。
与传统图片形式的图标相比,其优势很多:

  • 可以通过 css 样式给其设置大小、颜色等,只要 font 支持的属性,它都支持,特别是 hover 效果无需两张图片,只需改变其颜色就可达到;
  • 作为矢量图,无论怎么改变大小,都不会失真;
  • 可以通过样式变量设置其颜色,做到全局统一,方便变换主题风格;
  • 图标海量,在无 UI 介入的情况下,也可便捷的找到想要的图标;
  • 可以减少网络请求。

二、阿里字体图标

1. 图标介绍

早前,我因为 Bootstrap 框架的集成而使用过 Font Awesome 字体图标库,后来遇到了iconfont-阿里巴巴矢量图标库,正如其宣传的那样——海量

2. 官方教程

作为前端,在没有 UI 配合的情况下,iconfont 提供的海量图标让我很容易找到想要的图标,其使用上也很便捷,关于阿里图标的使用介绍,请查看官方提供的帮助中心,在此不做过多赘述。

3. 图标编辑

由于大多图标上传者并非一人,其质量层次不齐,无法像 Font Awesome 那样做到风格一致,此时需要点开图标的编辑功能,对图标的大小与位置做一些统一的调整,以使选择的图标能在样式上保持一致。

图标调整.png

三、在小程序中使用

1. 载入方式

我在 vue 项目中使用方式是直接将字体图标文件下载后放入到 static/iconfont 文件夹下,在 main.js 中引入即可;但同样的方式在小程序中是不可行的,问题如下:
首先将 iconfont.css 后缀名改为 .wxss,我一般会在项目根目录新建一个 static/iconfont 文件夹来存放字体文件,该文件的 iconfont.wxss 内容如下所示:

1.png

接下来在 app.wxss 文件中引入样式文件

@import "./static/iconfont/iconfont.wxss";

但此时,微信开发者工具会报 do-not-use-local-path 错误,原因是微信小程序的样式文件不支持引入本地文件(无论是字体还是图片等资源, .wxml 文件支持本地图片),只支持外链或者 base64 方式引入,所以解决方案如下:

1) 外链方式引入

iconfont 项目页面,选择 Unicode 方式,生成在线代码,如下图所示:
image.png

接下来我们将 iconfont.wxss 中字体的本地路径改为网络路径,虽然首次加载(开发者工具清空全部缓存)时开发者工具会报加载异常,但字体图标文件实际已加载完成,图标能成功显示出来。 4.png
此时本地的字体文件已经无用了,我们可以将文件删除。这种方式可以减少文件的体积。当然如同下载时页面的提示一样,使用三方 CDN 是有一些风险的,前不久阿里字体就出现过无法访问的问题,稳妥点的方式是将字体文件上传到自己的服务器或者 cdn 中作为外链使用。
缺点:

  • 每次增加图标时需要替换对应的服务器上的文件,使用起来较为繁琐;
  • 链接必须是 https,可能存在跨域问题。
2) base64 形式引入

该方式是我目前使用的方式,我也推荐使用该方式。
首先我们点击 iconfont 项目中的 项目设置 按钮,位置如下图所示:

image.png

我们勾选图中所示三种字体格式,选择 base64 是为了将另外两种字体转为 base64 形式,而选择 woffttf 字体原因如下:

  • TTF 兼容性更好,缺点是字体文件体积大;
  • WOFF 与 TTF 字体相比体积小且表现性好;
  • WOFF2 字体是对 WOFF 字体的升级,但兼容性欠佳。

微信的官方文档中也建议选择以上两种字体

建议格式为 TTF 和 WOFF,WOFF2 在低版本的 iOS 上会不兼容。

我们再次下载设置后的字体图标文件,并将 iconfont.css 重命名为 iconfont.wxss,因为下载的文件已将字体转为 base64 格式放入到 iconfont.wxss 中,所以我们只需要将 iconfont.wxss 文件复制到项目中即可,如下图所示:

8.png 虽然 base64 形式会增加约 1/3 的体积,但在少量图标的情况下,我更推荐这种方式引入,增加新图标时也只需要替换该文件即可,且由于会编译到小程序包文件中,不会出现外链形式在弱网或加载失败时图标显示为方框(所有字体找不到对应字符编码文件时都会显示成这样)的问题。

2. 代码示例

字体图标使用很简单,代码如下:

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

3. 组件封装

每次写重复的标签与类名,不如将其封装为图标组件,只需要传入字体名称等属性,在使用上会方便很多。

icon 组件的封装代码如下,name 即为字体图标的名称:

<!-- components/icon/index.wxml 文件 -->
<text class="iconfont icon-{{ name }}" />
// components/icon/index.js 文件
Component({
  // 此设置使外部样式可以影响组件样式 
  options: {
    addGlobalClass: true,
  },
  
  properties: {
    // 字体图标名称
    name: {
      type: String
    }
  }
}

图标组件在使用时,为方便起见,我会将图标组件设置为全局组件,使其在任意页面或组件中可直接使用。

// app.json 文件
// 由于小程序内置 icon 标签,我一般会将全局组件设置个前缀名称,即命名空间
"usingComponents": {
  "m-icon": "/components/icon"
},

页面中使用

<m-icon name="play" />

4. 样式调整

iconfont.wxss 的默认样式如下图所示:
image.png
字体图标是使用 css 伪元素的方式实现,由于字体图标质量层次不齐,我在日常使用中一般会对其做一些调整,如设置默认水平垂直居中、默认字体大小改为 rpx 单位,以适应微信小程序,代码如下:

.iconfont
  font-family: "iconfont" !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

5. 命名调整

字体图标名称的前缀与 font family 是可以调整的,可以在 iconfont 项目设置 中更改字体名称与前缀(推荐此方式),也可以更改下载后的 .css 文件,以避免在多人协作项目中与他人的命名产生冲突;
特别是在制作组件库时,需要修改名称与自己组件库的命名空间保持一致。 变更方法如下,打开 项目设置

修改字体名称
保存后再次下载的图标文件中对应的 iconfont.wxss 文件内容如下:

@font-face {
  font-family: "m-font"; // 变更后的字体名称
}

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

.m-icon-xxx:before {
  content: "\e653";
}

使用示例:

<text class="m-font m-icon-xxx" />

结束语

如您阅读过程中遇到任何问题,请留言。