使用矢量字体自定义小程序 icon 组件图标（小程序自定义字体）

使用矢量字体自定义小程序 icon 组件图标（小程序自定义字体）

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

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

一个问题

微信小程序中的 icon 组件只有 9 种类型 success、success_no_circle、info、warn、waiting、cancel、download、search、clear。具体可以参考 icon 组件官方文档。

一个想法

我们往往希望不受上述 9 种图标的限制，拓展 icon 组件的图标。这就涉及到如何自定义图标的问题。自定义图标有多种方法，比如使用图片、精灵图、CSS 样式绘制、SVG 矢量文件等方法。本文着重介绍如何使用矢量字体自定义小程序的 icon 组件图标。

一个概念

什么是矢量字体？

字体包括点阵字体和矢量字体。矢量字体目前用的比较广泛，分为三类：Adobe 的 Type1、Apple 和 Microsoft 主导的 TrueType、Adobe Apple Microsoft 共同主导的开源字体 OpenType。对于矢量字体，每个 Unicode 是编码的索引，每个字符的描述信息是一个几何矢量绘图描述信息。矢量字体是实时绘制出来的，所以可以实时填充任何颜色，可以无级缩放而没有锯齿。

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

一个实践

获取矢量图标

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

微信小程序代码编写

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

WXSS 代码

其中要注意的是，在 iconfont 中复制的 font-face 代码是直接粘贴到 WXSS 中的。咖啡豆图片的 Unicode  把前边的 &#x 转为 \ 即可，然后将其放到 icon-coffee 的 content 中。

@font-face { font-family: 'iconfont'; /* project id 1834535 */ src: url('//at.alicdn.com/t/font_1834535_c5751gpcjt.eot'); src: url('//at.alicdn.com/t/font_1834535_c5751gpcjt.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_1834535_c5751gpcjt.woff2') format('woff2'), url('//at.alicdn.com/t/font_1834535_c5751gpcjt.woff') format('woff'), url('//at.alicdn.com/t/font_1834535_c5751gpcjt.ttf') format('truetype'), url('//at.alicdn.com/t/font_1834535_c5751gpcjt.svg#iconfont') format('svg');}.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}.icon-coffee:before { content: "\e634"; color: darkgoldenrod; font-size: 70px;}复制代码-

WXML 代码

复制代码-

运行效果

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

相关免费学习推荐：小程序开发教程

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。