题图：来自 Unsplash.com

本文是微信小程序开发学习笔记。

微信小程序 icon 组件（标签）只提供了 9 种类型的图标，不能满足开发或设计的个性化需求。为了解决这个问题，我们可以使用自定义的 icon 图标，来丰富原有的图标类型。

在微信小程序中使用自定义 icon 图标有 6 种方法：

1.使用 icon 图标（特指位图）

2.使用 Sprite（精灵图）

3.使用 CSS 样式绘制（这种方法工作量大）

4.使用矢量字体

5.使用 SVG 矢量文件

6.使用 Canvas

本文只对第 4 种方法进行说明，因为除了第 1 种方法，其他方法我暂时还都不会。

使用矢量字体来自定义 icon 图标，需要用到阿里巴巴图标库网站 Iconfont。

题外话，以前我一直以为这个网站只能用于设计，直到接触了一些前端的知识，才知道它也能运用到编程中。

打开网站，选择一个自己喜欢的图标，将其添加到购物车，类似购物时将商品添加到购物车的操作，重复操作，将你喜欢的图标一一添加到购物车中。

选择好需要的所有图标后，点击右上角的「购物车」图标。

浏览器右侧会弹出一个面板，选择「添加至项目」，如果你之前未曾创建过项目，这里就需要新建一个项目，新建项目其实就是新建一个文件夹。

将鼠标移动到网页顶部的导航栏「图标管理」，在弹出的菜单中，点击「我的项目」。

在我的项目中，点击「查看在线链接」。

下方会出现一长串代码，其中的 url 链接指向的就是存放在阿里云服务器的矢量字体，这些字体有不同的格式，如 ttf、woff、woff2，之所以需要用到不同的字体格式，是为了兼容不同的设备或系统。

接着点击「点此复制代码」，将代码复制到系统剪贴板中。

回到微信小程序开发者工具中，将代码粘贴到小程序页面的 wxss 文件中，wxss 文件可以类比为普通网页的 css 文件。

接着在 wxss 文件中进一步定义 icon 图标的样式，输入以下的代码：

font-family 指定我们嵌入的字体名称，它需要与 @font-face 中 font-family 的值保持一致 ，color 设置图标的颜色，font-size 设置图标的大小。

icon-heart 和 icon-like 是自定义的类选择器名称（简称类名），你可以根据自己的喜好进行命名，这里的 icon-heart 代表爱心图标，icon-like 代表点赞图标。

content 指定图标的 unicode 编码，获取图标的编码还需要回到 iconfont，将鼠标移动到图标上方，在弹出的菜单中，选择「编辑图标」。

在打开的页面中，左下角的 4 位字符——e8ab，就是爱心图标的 unicode 编码，将其粘贴到 wxss 文件中对应的位置，并在字符前面加上一个反斜杠 \。

获取点赞图标的 unicode 编码，也需要进行同样的操作。

至此，就算完成了 wxss 样式的编辑。

为了在小程序中看到图标最终的渲染效果，我们还需要编辑一下 wxml 文件，wxml 相当于普通网页的 html 文件。在 wxml 中使用 icon 标签，输入如下代码：

这里的 class 属性的值，就是对应 wxss 文件中自定义的类名，通过类名来应用相应的样式。完成以上所有操作，最终的渲染效果如下：

搞得那么费劲，就只为得到两个小图标。。。好像有点得不偿失

扩展阅读：

《写一个微信小程序的最少必要知识》

以上，希望有帮助。

[1] Iconfont: https://www.iconfont.cn/

欢迎关注