18221533805
微信小程序开发 | 如何在小程序中使用自定义 icon 图标
上海微信小程序开发制作、APP、网站、小程序定制、小程序外包开发公司

微信小程序开发 | 如何在小程序中使用自定义 icon 图标

2022-06-22

题图 www.xilukeji.com

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

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

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

1.使用 icon 图标(特指位图)

2. 微信(精灵图)

3.使用 CSS 风格绘制(这种方法工作量大)

4.使用矢量字体

5.使用 SVG 矢量文件

6.使用 微信


这篇文章只解释了第 4 的方法,因为我暂时不除了第 1 的方法。


使用矢量字体来自定义 icon 图标,需要阿里巴巴图标库网站 微信。


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


打开网站,选择你最喜欢的图标,添加到购物车中,将商品添加到购物车中,重复操作,并将你最喜欢的图标添加到购物车中。


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



浏览器右侧会弹出面板,选择「添加至项目」,如果你以前没有创建过一个项目,你需要在这里建立一个新的项目。新项目实际上是一个新的文件夹。



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



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



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

接着点击「点此 ** 代码」,将代码 ** 进入系统剪贴板。



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



接着在 wxss进一步定义 icon输入以下代码:


.微信{ 微信: '微信'; color: red; 微信: 30px;}.微信:微信{ 微信:'e8ab';}.微信:微信{ 微信:'e8ad';}


微信指定我们嵌入的字体名称,需要与 一起使用@微信中 微信的值保持一致 ,color微信设置图标的颜色。

微信和 微信是自定义的类选择器名称(以下简称类名)。你可以根据自己的喜好来命名。 微信代表爱情图标,微信代表赞美图标。

微信指定图标的 微信编码需要返回 微信,将鼠标移动到图标上方,并在弹出菜单中选择「编辑图标」。



在打开的页面中,左下角的 4 位字符——e8ab, 微信编码为爱心图标,粘贴到 wxss 文件对应的位置,并在字符前添加反斜杠 。



微信编码获得点赞图标,也需要同样的操作。

至此,即使完成了 wxss 编辑风格。


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

       <icon class="微信30334"></icon> <icon class="微信30334"></icon>


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


只是为了得到两个小图标。。。似乎得不偿失


扩展阅读:

至少写一个微信小程序的必要知识


以上,希望有所帮助。





微信小程序开发 | 如何在小程序中使用自定义 icon 图标 希望这篇文章对您有帮助.

上海西陆信息科技有限公司 承接各类微信小程序开发制作、小程序定制、APP 网站 开发制作,联系电话 18221533805、15900430334