写点什么

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

用户头像
彭宏豪95
关注
发布于: 2020 年 06 月 03 日
微信小程序开发 | 如何在小程序中使用自定义 icon 图标

题图:来自 Unsplash.com



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



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





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



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

2.使用 Sprite(精灵图)

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

4.使用矢量字体

5.使用 SVG 矢量文件

6.使用 Canvas



本文只对第 4 种方法进行说明,因为除了第 1 种方法,其他方法我暂时还都不会。



使用矢量字体来自定义 icon 图标,需要用到阿里巴巴图标库网站 Iconfont[1]。



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



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





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





浏览器右侧会弹出一个面板,选择「添加至项目」,如果你之前未曾创建过项目,这里就需要新建一个项目,新建项目其实就是新建一个文件夹。





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





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





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



接着点击「点此复制代码」,将代码复制到系统剪贴板中。





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





接着在 wxss 文件中进一步定义 icon 图标的样式,输入以下的代码:



.iconfont{
font-family: 'iconfont';
color: red;
font-size: 30px;
}

.icon-heart::before{
content: '\e8ab';
}
.icon-like::before{
content: '\e8ad';
}



icon-heart 和 icon-like 是自定义的类选择器名称(简称类名),你可以根据自己的喜好进行命名,这里的 icon-heart 代表爱心图标,icon-like 代表点赞图标。



content 指定图标的 unicode 编码,获取图标的编码还需要回到 iconfont,将鼠标移动到图标上方,在弹出的菜单中,选择「编辑图标」。





在打开的页面中,左下角的 4 位字符——e8ab,就是爱心图标的 unicode 编码,将其粘贴到 wxss 文件中对应的位置,并在字符前面加上一个反斜杠 \。





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



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



在 wxml 中使用 icon 标签,输入如下代码:   



<icon class="iconfont icon-heart"></icon>
<icon class="iconfont icon-like"></icon>



完成以上所有操作,最终的渲染效果如下:





扩展阅读:

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



以上,希望有帮助。

References



[1]

 Iconfont: https://www.iconfont.cn/



发布于: 2020 年 06 月 03 日阅读数: 202
用户头像

彭宏豪95

关注

新媒体从业者 2017.10.20 加入

喜欢挖掘推荐各种好玩的应用 公众号:效率工具指南

评论

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