标题图片：来自

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

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

微信小程序中使用自定义图标的方式有6种：

1. 使用图标（特别是位图）

2. 使用（）

3.使用CSS样式绘制（此方法比较费力）

4. 使用矢量字体

5.使用 SVG 矢量文件

6.使用

本文只讲解第四种方法，因为除了第一种方法以外我不知道其他的方法。

要使用矢量字体定制图标，需要使用阿里巴巴图标库网站[1]。

对了，之前我以为这个网站只能用来做设计，直到接触了一些前端知识，才发现它也可以应用于编程。

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

选择完您需要的图标后，点击右上角的“购物车”图标。

浏览器右侧会弹出一个面板，选择“添加到项目”，如果你之前没有创建过项目，那么你需要在这里创建一个新项目，创建新项目其实就是创建一个新文件夹。

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

在我的项目中，单击查看在线链接。

下面会出现一长串的代码，URL链接指向的是阿里云服务器中存储的矢量字体，这些字体有不同的格式，比如ttf、woff等，为了兼容不同的设备或者系统，需要不同的字体格式。

然后点击“单击此处复制代码”将代码复制到系统剪贴板。

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

然后在wxss文件中进一步定义图标样式，输入如下代码：

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

icon- 和 icon-like 是自定义的类选择器名称（简称类名），你可以根据自己的喜好来命名，这里 icon- 代表心形图标，icon-like 代表竖起大拇指图标。

指定图标代码。要获取图标代码，您需要返回，将鼠标移到图标上，然后在弹出菜单中选择“编辑图标”。

在打开的页面中，左下角的4个字符-e8ab，就是爱心图标的代码，粘贴到wxss文件中的相应位置，并在字符前添加反斜杠\。

获取点赞图标的代码也需要同样的操作。

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

为了在小程序中看到图标最终的渲染效果，我们还需要编辑wxml文件，wxml相当于普通网页的html文件。

在wxml中使用icon标签，输入如下代码：

这里的属性值对应wxss文件中自定义的类名，通过类名来应用相应的样式。

完成以上所有操作后，最终的渲染效果如下：

为了得到两个小图标而付出这么多努力...似乎不值得