微信小程序开发:使用字体图标的方法

简介: 在微信小程序开发过程中,图标的使用是很常见很普遍的。一般情况下,在微信小程序项目的文件目录里面images里面,可以直接引用本地的图标文件,但是通过使用字体图标或者background设置背景图的时候,就不用引用本地图标文件,只能使用根据URL链接地址的字体或者图片,再或者使用base64把普通图标编码之后的格式。

前言

在微信小程序开发过程中,图标的使用是很常见很普遍的。一般情况下,在微信小程序项目的文件目录里面images里面,可以直接引用本地的图标文件,但是通过使用字体图标或者background设置背景图的时候,就不用引用本地图标文件,只能使用根据URL链接地址的字体或者图片,再或者使用base64把普通图标编码之后的格式。

那么本篇博文就来分享一下微信小程序项目中怎么使用字体图标,以及把字体的URL转化成base64的格式之后再使用的方法。本案例以某里巴巴矢量图标库来举例子,具体操作如下所示。

操作步骤

1、首先打开某里巴巴矢量图标库的官网,然后搜索查找想要的图标,然后单击选择“添加入库”按钮;

1.png

2.png

2、去购物车找到添加进入的字体,然后单击选择,选择底部菜单栏里面的”添加至项目“按钮;

3.png

3、点击右上角”+“按钮,然后输入项目名称,点击”确定“按钮;

4.png


5.png

4、然后去新建的项目中找到添加的字体,然后单击选中,点击”下载至本地“按钮,即可下载到电脑本地;

6.png


7.png


8.png

5、找到下载到电脑本地的字体文件,然后打开该文件,打开里面的iconfont.css文件,然后直接复制里面的url和iconfont方法,所有的样式,直接粘贴到需要使用字体图标的wxss文件中;

9.png


10.png


11.png


12.png

6、最后在使用字体图标的wxml文件中调用一下,即可。

13.png

最后

以上案例是按照某里巴巴矢量图标库来做例子讲解的,有好多种字体图标转化的网站平台,所以其他平台就不再一一介绍,感兴趣的开发者可以去了解其他平台的使用方法。这就是本文关于在微信小程序开发的时候使用字体图标的方法,分享给有需要的人,这里不再赘述。以上就是本章全部内容,欢迎关注三掌柜的微信公众号“程序猿三掌柜”,三掌柜的新浪微博“三掌柜666”,欢迎关注!

相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
10天前
|
小程序 Android开发
|
2天前
|
小程序 云计算 Android开发
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)
10 2
|
5天前
|
小程序
|
6天前
|
小程序 数据安全/隐私保护
家政服务小程序APP开发,做好上门家政最快的方法是什么?
在家政服务领域,打造成功的平台并非易事。本文分享了三个关键步骤:避免初期盲目投入、采用低成本获客方式、建立有效的阿姨筛选机制。遵循这些方法,可助你避开常见陷阱,成为行业头部平台。
|
11天前
|
小程序
|
11天前
|
人工智能 小程序
【一步步开发AI运动小程序】五、帧图像人体识别
随着AI技术的发展,阿里体育等公司推出的AI运动APP,如“乐动力”和“天天跳绳”,使云上运动会、线上健身等概念广受欢迎。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。文章分为四部分:初始化人体识别功能、调用人体识别功能、人体识别结果处理以及识别结果旋转矫正。下篇将继续介绍人体骨骼图绘制。
|
5天前
|
小程序