用矢量字体自定义小程序图标组件图标。

小程序开发教程专栏介绍了如何自定义小程序的图标组件icon。

一个提问微信小程序只有九类图标组件:成功、成功_否_圈、信息、警告、等待、取消、下载、搜索、清除。详情请参考图标组件官方文档。

一个想法我们经常想扩展图标组件的图标，而不局限于以上九个图标。这就涉及到如何自定义图标的问题。自定义图标的方法有很多，比如使用图片、向导图、CSS样式绘制、SVG矢量文件等等。本文重点介绍如何用矢量字体自定义applet的图标组件icon。

一个概念什么是矢量字体？

字体包括点阵字体和矢量字体。矢量字体目前应用广泛，可分为三类:Adobe的Type1，苹果和微软主导的TrueType，Adobe苹果微软联合主导的开源字体OpenType。对于矢量字体，每个Unicode都是一个编码索引，每个字符的描述信息都是一个几何矢量图描述信息。矢量字体是实时绘制的，所以可以实时填充任意颜色，可以无限缩放，不会出现锯齿。

要使用矢量字体，就要涉及到一个非常有用的网站:Iconfont-阿里巴巴矢量图标库。该网站不仅提供图标下载，还提供自定义矢量图标的生成和下载。接下来，我将一步一步地介绍如何使用矢量字体自定义小程序的图标组件icon。

一个实用的矢量图标打开Iconfont-阿里巴巴矢量图标库网站，其首页如下:

因为这里我们不关心图标是什么样子，我们只关心如何从矢量图标一步步生成图标到微信小程序代码定义图标组件图标。所以我们直接选择第一个图标集合，点击如下图。

然后点击第一个图标库，详情如下。这里我们把鼠标放在第三个图标——咖啡豆图标上，会出现三个按钮，分别是添加到购物车、收藏和下载。我们需要点击添加购物车按钮。

这时，右上角的购物会有一个红色的角落标志。点击右上角的按钮，显示如下界面。

然后我们点击“添加到项目”按钮，会弹出如下界面。如果没有项目，请创建一个新项目。如果有，就选一个你觉得合适的接口。在这里，我预先创建了一个新的测试项目，并直接选择了测试项目。

添加项目后，网页会自动跳转到项目详情界面。该界面包含刚刚添加的图标。

此时，我们点击中间的“查看在线链接”按钮，会生成一系列代码，显示在网页中间。至此，我们在iconfont.cn的任务已经完成，我们已经得到了想要的图标远程链接和Unicode值。刚刚生成的代码是图标的远程链接，咖啡豆图标下面的文字是图标对应的Unicode值。下面写微信小程序代码的时候会用到这两个内容。

微信小程序的代码更容易写。首先编写WXSS文件，将刚刚得到的远程字体链接直接粘贴到WXSS中，然后编写自定义的iconfont样式，最后在icon组件中引用。其代码如下:

WXSS代码需要注意的是，iconfont中复制的font-face代码是直接粘贴到WXSS中的。咖啡豆图片的Unicode可以改成\，然后放到icon-coffee的内容里。

@ font -face { font -family:' icon font '；/* project id 1834535 */src:URL('//at . alicdn . com/t/font _ 1834535 _ c 5751 GPC JT . eot ')；src:URL('//at . alicdn . com/t/font _ 1834535 _ c 5751 GPC JT . eot？#iefix ')格式(' embedded-opentype ')、URL('//at . alic dn . com/t/font _ 1834535 _ c 5751 GPC JT . woff 2 ')格式(' woff ')、URL('//at . alic dn . com/t/font _ 1834535 _ c 5751 GPC JT . woff ')、URL('//at . alic dn . com/t/font _ 1834535 _ c 57515}.icon font { font -系列:& quoticonfont & quot！重要；font -大小:16pxfont-style:正常；-WebKit -font -平滑:抗锯齿；-moz -OSX -font -平滑:灰度；} . icon -咖啡:before { content:& quot；\ e634 & quot；颜色:暗一枝黄花；font -size:70px；}复制代码WXML代码

至此，介绍了使用矢量字体自定义小程序图标组件icon的过程。如有疑问，欢迎讨论。

这几篇文章你可能也喜欢：

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

本文由主机参考刊发，转载请注明：用矢量字体自定义小程序图标组件图标。 https://zhujicankao.com/120624.html