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

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

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

一个思路:我们往往希望扩展图标组件的图标，而不受以上九个图标的限制。这就涉及到如何自定义图标了。自定义图标的方法有很多，比如使用图片、精灵、CSS样式绘制、SVG矢量文件等。本文重点介绍如何使用矢量字体自定义applet的图标组件icon。

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

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

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

一个练习获取矢量图标打开Iconfont-阿里巴巴矢量Logo库的网站，首页如下:

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

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

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

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

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

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

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

WXSS代码需要注意的是，iconfont中复制的font-face代码是直接粘贴到WXSS中的。咖啡豆图片的Unicode把前面转#x变成\并把它放在icon-coffee的内容里。

@ font -face { font -family: # 39；iconfont # 39；/*项目id 1834535 */src:URL( # 39；//at . alicdn . com/t/font _ 1834535 _ c 5751 GPC JT . eot # 39；);src:URL( # 39；//at . alicdn . com/t/font _ 1834535 _ c 5751 GPC JT . eot？# iefix # 39)格式( # 39；嵌入式-opentype # 39；)，网址( # 39；//at . alicdn . com/t/font _ 1834535 _ c 5751 GPC JT . woff 2 # 39；)格式( # 39；woff2 # 39)，网址( # 39；//at . alicdn . com/t/font _ 1834535 _ c 5751 GPC JT . woff # 39；)格式( # 39；woff # 39)，网址( # 39；//at . alicdn . com/t/font _ 1834535 _ c 5751 GPC JT . TTF # 39；)格式( # 39；truetype # 39)，网址( # 39；//at . alicdn . com/t/font _ 1834535 _ c 5751 GPC JT . SVG # icon font # 39；)格式( # 39；svg # 39);}.icon font { font -系列: iconfont ！重要；font -大小:16pxfont-style:正常；-WebKit -font -平滑:抗锯齿；-moz -OSX -font -平滑:灰度；} . icon -咖啡:before { content: ；\ e634 ；颜色:暗一枝黄花；font -size:70px；}复制代码WXML代码< icon class = icon font icon -coffee ； gt lt/icon gt；复制代码运行效果

至此，已经介绍了使用矢量字体自定义小程序图标组件icon的过程。如果你有任何问题，请随时讨论。

以上是使用矢量字体自定义小程序图标组件icon的细节。请多关注主机参考其他相关文章！

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

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

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