当前位置：首页 > news >正文

微信小程序中使用iconfont的详细教程

news 来源：原创 2025/7/21 14:11:07

我们知道微信小程序对包体积有很严格的要求，最大不超过2M，而图片资源对包体检有至关重要的影响，所以使用自定义的图标字体来代替大量图标图片也是提高小程序性能的重要手段，总的来说在微信小程序中使用 IconFont（图标字体）具有以下几个原因和优势：

为何要使用IconFont：

统一的图标风格：
- IconFont 提供了大量的高质量图标，可以确保整个小程序的图标风格统一，提升用户体验。
灵活性：
- 图标字体可以根据需要进行缩放、颜色调整等样式修改，而不需要准备不同尺寸的图片。
减少 HTTP 请求：
- 使用图标字体可以将多个图标合并成一个字体文件，减少网络请求次数，提高页面加载速度。
易于维护：
- 修改或更新图标时，只需在 IconFont 平台上进行操作，然后重新下载并替换字体文件，无需手动修改每个图标图片。

使用IconFont的优势：

性能优化：
- 图标字体文件通常较小，加载速度快，有助于提高小程序的性能。
- 字体文件可以被浏览器缓存，减少重复加载。
可访问性：
- 图标字体可以通过 CSS 设置 aria-label 属性，提高小程序的可访问性，使屏幕阅读器能够正确识别图标含义。
跨平台兼容性：
- 图标字体在不同的操作系统和设备上都能保持一致的显示效果，不受分辨率和像素密度的影响。
易于定制：
- 可以通过 CSS 轻松改变图标的颜色、大小、阴影等样式，实现个性化设计。
- 支持伪元素和动画效果，可以实现更复杂的设计需求。
节省存储空间：
- 相比于使用大量的 SVG 或 PNG 图标，图标字体占用的存储空间更少，有助于减小小程序的体积。
版本控制：
- 使用 IconFont 平台可以方便地进行版本控制，确保团队成员使用的是最新的图标资源。

应用场景：

导航栏：使用图标字体可以快速创建简洁明了的导航栏。
按钮：为按钮添加图标，增强用户操作的直观性。
表单元素：在输入框、选择框等表单元素中使用图标，提高用户体验。
提示信息：使用图标字体可以直观地展示提示信息或警告状态。

下面我们来详细介绍IconFont在微信小程序中的具体使用步骤：

使用IconFont的详细步骤：

1. 下载并导入 IconFont 项目

登录 IconFont 平台：访问 iconfont-阿里巴巴矢量图标库并登录的账户。
创建或选择项目：创建一个新项目或选择一个已有的项目。
添加图标：将需要的图标添加到项目中。
生成字体文件：在项目页面中，点击“Font class”或“Symbol”选项卡，然后点击“下载至本地”按钮，选择需要的格式（如 iconfont.eot, iconfont.svg, iconfont.ttf, iconfont.woff 和 iconfont.css）。

2. 解压下载的文件

下载完成后，会得到一个压缩包。解压后，会看到以下文件：

iconfont.eot
iconfont.svg
iconfont.ttf
iconfont.woff
iconfont.css
iconfont.json

3. 将文件添加到小程序项目中

将解压后的文件复制到小程序项目目录中，例如 project/miniprogram/assets/iconfont。

4. 引入 CSS 文件

在小程序项目中引入 iconfont.css 文件。可以在 app.wxss 或页面的 wxss 文件中引入：

@import "/path/to/project/miniprogram/assets/iconfont/iconfont.css";

5. 使用图标

使用 Font class 方式

在 WXML 中使用图标：

<i class="iconfont icon-xxx"></i>

其中 icon-xxx 是在 IconFont 平台中定义的图标类名。

使用 Symbol 方式

在 WXML 中使用图标：

<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use>
</svg>

其中 icon-xxx 是在 IconFont 平台中定义的图标 ID。

6. 使用 `iconfont.json` 文件

iconfont.json 文件包含了图标的元数据，可以使用它来动态生成图标类名或 ID。以下是一个简单的示例，展示如何在微信小程序中使用 iconfont.json 文件：

将 iconfont.json 文件添加到小程序项目中：

将 iconfont.json 文件复制到小程序项目目录中，例如 project/miniprogram/assets/iconfont/iconfont.json。

在小程序中引入 iconfont.json 文件：

在页面或组件中引入 iconfont.json 文件：

const iconfontConfig = require('/path/to/project/miniprogram/assets/iconfont/iconfont.json');
// 注意path/to/project/miniprogram需要改为自己本地项目的路径

动态生成图标类名或 ID：

可以根据需要动态生成图标类名或 ID：

Page({data: {iconName: 'xxx', // 替换为自己需要的图标名称iconClassName: '',},onLoad() {this.generateIconClassName(this.data.iconName);},generateIconClassName(iconName) {const glyph = iconfontConfig.glyphs.find(glyph => glyph.name === iconName);if (glyph) {this.setData({iconClassName: glyph.font_class,});}},
});

在 WXML 中使用动态生成的图标类名：
```
<i class="iconfont {{iconClassName}}"></i>
```

通过以上步骤，即可在微信小程序中成功地使用 iconfont来管理和使用自定义的图标字体。如果本文对你有所收获，欢迎关注一起交流。O(∩_∩)O

微信小程序中使用iconfont的详细教程

我们知道微信小程序对包体积有很严格的要求，最大不超过2M，而图片资源对包体检有至关重要的影响，所以使用自定义的图标字体来代替大量图标图片也是提高小程序性能的重要手段，总的来说在微信小程序中使用 IconFont（图标字…...

编程日记 2025/7/21 14:11:07

【小白学机器学习33】大数定律python的 pandas.Dataframe 和 pandas.Series基础内容

目录 0 总结 0.1pd.Dataframe有一个比较麻烦琐碎的地方，就是引号和括号 0.2 pd.Dataframe关于括号的原则 0.3 分清楚几个数据类型和对应的方法的范围 0.4 几个数据结构的构造关系 list → np.array(list) → pd.Series(np.array)/pd.Dataframe 1 python 里…...

编程日记 2025/7/20 15:03:27

hue 4.11容器化部署，已结合Hive与Hadoop

配合《Hue 部署过程中的报错处理》食用更佳官方配置说明页面： https://docs.gethue.com/administrator/configuration/connectors/ 官方配置hue.ini页面 https://github.com/cloudera/hue/blob/master/desktop/conf.dist/hue.ini docker部署注意： …...

编程日记 2025/7/21 6:29:58

“软件定义汽车”时代 | 产线海量数据刷写解决方案

一背景从起初汽车概念问世时期的“机械定义汽车”，到电力出现后的“电器定义汽车”，再到电子科技迅猛发展后的“电子定义汽车”，再到如今的“软件定义汽车”，可以看出，软件在车辆中扮演着越来越重要的角色。与此同时…...

编程日记 2025/7/21 11:21:02

DDoS对策是什么？详细解读DDoS攻击难以防御的原因与解决方案

近年来，DDoS（分布式拒绝服务）攻击的规模和频率不断增加。根据数据显示，2023年已观测到的最大攻击流量达到700Gbps，远远超出了许多企业的防御能力。DDoS攻击导致的网站性能问题如页面加载缓慢、频繁的504错误等现象&…...

编程日记 2025/7/20 5:17:55

【AI系统】Tensor Core 架构演进

自 Volta 架构时代起，英伟达的 GPU 架构已经明显地转向深度学习领域的优化和创新。2017 年，Volta 架构横空出世，其中引入的张量核心（Tensor Core）设计可谓划时代之作，这一设计专门针对深度学习计算进行了优…...

编程日记 2025/7/15 8:07:11

React前端框架基础知识详解

React 是由 Facebook 推出的一个用于构建用户界面的 JavaScript 库，现已成为前端开发中最流行的框架之一。React 的核心理念是通过组件化的方式构建用户界面，提升代码的可维护性和复用性。本文将为大家详细介绍 React 框架的基础知识，并带你快…...

编程日记 2025/7/15 23:27:55

Python学习——猜拳小游戏

import random player int(input(“请输入：剪刀 0，石头 1，布2”)) computer random.randint(0,2)# print(“玩家输入的是%d，电脑输入的是%d” %(player,computer)) 用于测试 if (player 0) and (computer 0) or (player 1) a…...

编程日记 2025/7/21 14:10:00

Spring：AOP通知类型

我们先来回顾下AOP通知: AOP通知描述了抽取的共性功能，根据共性功能抽取的位置不同，最终运行代码时要将其加入到合理的位置通知具体要添加到切入点的哪里? 共提供了5种通知类型: 前置通知后置通知环绕通知(重点)返回后通知(了解)抛出异常后通知(了…...

编程日记 2025/7/21 13:45:11

【公益接口】不定时新增接口，仅供学习

文章日期：2024.11.24 使用工具：Python 文章类型：公益接口文章全程已做去敏处理！！！ 【需要做的可联系我】 AES解密处理（直接解密即可）（crypto-js.js 标准算法&#xff…...

编程日记 2025/7/21 13:54:47

public function dumpData(){error_reporting(0); // 禁止错误信息输出ini_set(display_errors, 0); // 不显示错误$limit $this->request->post(limit, 20, intval);$offset $this->request->post(offset, 0, intval);$page floor($offset / $limit) 1 ;$wh…...

编程日记 2025/7/21 13:48:39

Docker3：docker基础1

欢迎来到“雪碧聊技术”CSDN博客！ 在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将…...

编程日记 2025/7/20 19:09:46

18. 【.NET 8 实战--孢子记账--从单体到微服务】--记账模块--账本

这一篇我们来一起为账本功能编写代码。账本功能的代码很简单，就是一些简单的CURD操作。一、需求我们先来看一下需求： 编号需求说明1新增账本1. 账本名称不能和用户已有的账本名称重复2删除账本1. 存在收支记录的账本不能删除3修改账本1. 修改的账本…...

编程日记 2025/7/16 12:07:35

GPT1.0 和 GPT2.0 的联系与区别

随着自然语言处理技术的飞速发展，OpenAI 提出的 GPT 系列模型成为了生成式预训练模型的代表。作为 GPT 系列的两代代表，GPT-1 和 GPT-2 虽然在架构上有着继承关系，但在设计理念和性能上有显著的改进。本文将从模型架构、参数规模、训练数据和…...

编程日记 2025/7/20 22:07:34

在 Taro 中实现系统主题适配：亮/暗模式

目录背景实现方案方案一：CSS 变量 prefers-color-scheme 媒体查询什么是 prefers-color-scheme？代码示例方案二：通过 JavaScript 监听系统主题切换背景用Taro开发的微信小程序，需求是页面的UI主题想要跟随手机系统的主题适配…...

编程日记 2025/7/20 14:33:36

uni-app 界面TabBar中间大图标设置的两种方法

一、前言最近写基于uni-app 写app项目的时候，底部导航栏中间有一个固定的大图标，并且没有激活状态。这里记录下实现方案。效果如下（党组织这个图标）： 方法一：midButton的使用官方文档：ta…...

编程日记 2025/7/21 13:59:54

leetcode 无重复字符的最长子串

3. 无重复字符的最长子串已解答中等相关标签相关企业提示给定一个字符串 s ，请你找出其中不含有重复字符的最长子串的长度。提示： 0 < s.length < 5 * 104s 由英文字母、数字、符号和空格组成 class Solution:def lengthOfLongest…...

编程日记 2025/7/21 13:46:35

【C++习题】14.滑动窗口_找到字符串中所有字母异位词

文章目录题目链接：题目描述：解法C 算法代码：图解题目链接： 438. 找到字符串中所有字母异位词题目描述： 解法暴力解法： 字母排序后运用滑动窗口解题。滑动窗口哈希表： 我们可以优化一下&am…...

编程日记 2025/7/17 17:36:44

matplotlib知识

问题与解决 1.module backend_interagg has no attribute FigureCanvas问题 Matplotlib 后端不兼容: matplotlib 使用的后端（如 backend_interagg）可能与当前环境不匹配或未正确加载。在代码中显式设置一个兼容的后端，例如 TkAgg、Qt5Ag…...

编程日记 2025/7/20 18:09:24

如何在ubuntu上调试core dump

启用core dump 确认ulimit 状态 ulimit -c 如果输出是0，表示core dump被禁用了运行 ulimit -c unlimited 再次运行 ulimit -c 确认输出是ulimited 设置core dump路径和文件名格式下面命令表示设置core dump文件在当前目录（%e表示程序名&#x…...

编程日记 2025/7/10 17:14:41

Spring Boot教程之五：在 IntelliJ IDEA 中运行第一个 Spring Boot 应用程序

在 IntelliJ IDEA 中运行第一个 Spring Boot 应用程序 IntelliJ IDEA 是一个用 Java 编写的集成开发环境 (IDE)。它用于开发计算机软件。此 IDE 由 Jetbrains 开发，提供 Apache 2 许可社区版和商业版。它是一种智能的上下文感知 IDE，可用于在各种应用程序…...

编程日记 2025/7/21 14:03:30

排序算法1

排序算法是《数据结构与算法》中最基本的算法之一。排序算法可以分为内部排序和外部排序，内部排序是数据记录在内存中进行排序，而外部排序是因排序的数据很大，一次不能容纳全部的排序记录，在排序过程中需要访问外存。常见的内部…...

编程日记 2025/7/19 1:32:50

vector, list 模拟实现

vector 实现成员属性/迭代器 template<class T> class vector { public:typedef T* iterator;typedef const T* const_iterator;iterator begin() {return _first; }iterator end() {return _end; }const_iterator begin() const {return _first; }const_iterator end…...

编程日记 2025/7/21 14:06:57

中国近代传奇战役

军事战略层面的传奇战役孟良崮战役：1947年5月，陈毅、粟裕指挥华东野战军在山东孟良崮地区对国民党军进行的一次大规模山地运动歼灭战。此役，我军出其不意地对国民党最强大的王牌之首第七十四师开战，并将其全歼。战役中&#xff…...

编程日记 2025/7/21 6:30:59

微信小程序页面配置详解：从入门到精通

微信小程序页面配置详解：从入门到精通引言随着移动互联网的飞速发展，微信小程序作为一种新兴的应用形式，因其便捷性和丰富的功能而受到广泛欢迎。在小程序的开发过程中，页面配置是至关重要的一环。本文将深入探讨微信小程序的页面配置，帮助开发者从基础到高级逐步掌握…...

编程日记 2025/7/21 13:47:40

C#基础题

6.在屏幕上输出如下所示数列：1 1 2 3 5 8 13 21……an(an<10000) 7.求任意两个整数之间所有整数的平方和？（要求从键盘输入任意两个整数，调用已定义函数求和） 8.将一个二维数组行和列元素互换，存…...

编程日记 2025/7/17 20:54:54

前端开发中v-if 与v-show的区别

v-if v-if指令用于条件性地渲染一块内容。这个块只有当指令的表达式返回true时才会被渲染。 ‌工作原理‌：v-if通过动态地创建和销毁元素来控制元素的显示与隐藏。当条件为false时，对应的元素及其绑定的事件监听器和子组件都会被销毁；当条件…...

编程日记 2025/7/21 14:03:29

Django实现智能问答助手-基础配置

设置 Django 项目、创建应用、定义模型和视图、实现问答逻辑，并设计用户界面。下面是一步一步的简要说明： 目录： QnAAssistant/ # 项目目录 │ ├── QnAAssistant/ # 项目文件夹 │ ├── init.py # 空文件 │ ├── settings.py # 项目配…...

编程日记 2025/7/20 15:57:23

2024-11-25 二叉树的定义

一、基本概念 1.二叉树是n(n>0)个结点的有限集合: ① 或者为空二叉树，即n0。 ②或者由一个根结点和两个互不相交的被称为根的左子树和右子树组成。左子树和右子树又分别是一棵二叉树。特点： ①每个结点至多只有两棵子树。 ②左右子树不能颠倒&am…...

编程日记 2025/7/18 1:08:21

构建高效 Redis 集群：从问题排查到最佳实践20241125

引言：Redis 集群的重要性 Redis 作为一款高性能的内存数据库，常用于高并发场景，比如缓存、消息队列和排行榜。通过构建 Redis 集群，可以进一步提升可用性与性能。然而，集群的部署并非一帆风顺，常会遇到各种…...

编程日记 2025/7/21 13:58:40

MyBatis多表映射

一、多表映射概念: 1.多表查询结果映射思路: MyBatis思想是:数据库不可能永远是你所想或所需的那个样子。我们希望每个数据库都具备良好的第三范式或BCNF范式，可惜它们并不都是那样。如果能有一种数据库映射模式，完美适配所有的应用程序查询需求&…...

编程日记 2025/7/21 13:55:54

[M最短路] lc743. 网络延迟时间(spfa最短路+单源最短路)

文章目录 1. 题目来源2. 题目解析 1. 题目来源链接：743. 网络延迟时间相关链接： [图最短路模板] 五大最短路常用模板) 2. 题目解析怎么讲呢，挺抽象的…很久没写最短路算法了。反正也是写出来了，但脱离了模板，把…...

编程日记 2025/7/20 1:27:12

使用nvm下载多个版本node后提示vue不是内部或外部命令，执行vue create报.vuerc错误

一、使用nvm后执行含vue的相关命令提示vue不是内部或外部命令前言：之前有项目需要切换node版本，我把node卸载了然后使用nvm下载多个版本的node。现在想通过vue create搭建vue2的项目时提示vue不是内部或外部命令，执行npm i vue/cli后仍然无…...

编程日记 2025/7/20 22:50:40

高端服务器可以防护哪些攻击？

高端服务器，尤其是那些专门设计用于防御网络攻击的高防服务器，能够提供多种层次的防护，以抵御不同类型的网络攻击。以下是高端服务器可以防御的主要攻击类型： 1. DDoS攻击（分布式拒绝服务攻击） 带宽消耗攻…...

编程日记 2025/7/21 1:36:43

助力花生作物智能化采摘，基于嵌入式端超轻量级模型LeYOLO全系列【n/s/m/l】参数模型开发构建花生种植采摘场景下花生果实智能检测计数系统

秋天，是大地回馈辛勤耕耘者的季节，金黄的稻田、硕果累累的果园、还有那一片片郁郁葱葱的花生地，共同绘制出一幅幅丰收的画卷。对于农民而言，秋收不仅仅是收获的季节，更是他们与土地情感交织、汗水与希望交织的见证。花…...

编程日记 2025/7/19 17:32:46

物联网无线局域网WiFi开发(二)：WiFi_RTOS_SDK

一、编译工程模板 （一）搭建app目录在SDK目录下新建app目录 cd 到examples目录下拷贝smart_config下所有文件到app目录下 cd 到app目录下查看文件是否拷贝成功 (二)修改gen_misc.sh vim 打开gen_misc.sh进行编辑修改SDK_PATH为当前SDK路径&#xf…...

编程日记 2025/7/20 16:20:01

GitLab｜应用部署

创建docker-compose.yaml文件输入docker-compose配置 version: 3.8 services:gitlab:image: gitlab/gitlab-ce:15.11.2-ce.0restart: alwayscontainer_name: gitlab-ceprivileged: truehostname: 192.168.44.235environment:TZ: Asia/ShanghaiGITLAB_OMNIBUS_CONFIG: |exter…...

编程日记 2025/7/13 19:50:43

替换Nacos的MySQL驱动

前言：替换Nacos的MySQL驱动能实现使Nacos支持MySQL8.0及以上版本的MySQL数据库注：下述教程会使用命令先解压Nacos的jar包然后重新用命令把Nacos压缩成jar包，不然直接用压缩工具替换MySQL驱动后的Nacos是会启动不起来的（因为没有替…...

编程日记 2025/7/18 22:54:39

链表内指定区间反转

描述将一个节点数为 size 链表 m 位置到 n 位置之间的区间反转，要求时间复杂度 O(n)O(n)，空间复杂度 O(1)O(1)。例如： 给出的链表为 1→2→3→4→5→NULL1→2→3→4→5→NULL, m2,n4m2,n4, 返回 1→4→3→2→5→NULL1→4→3→2→5→NULL. …...

编程日记 2025/7/21 14:01:27

jmeter5.6.3安装教程

一、官网下载需要提前配置好jdk的环境变量 jmeter官网：https://jmeter.apache.org/download_jmeter.cgi 选择点击二进制的zip文件下载成功后，默认解压下一步，更改安装路径就行(我安装在D盘) 实用jmeter的bin目录作为系统变量然后把这…...

编程日记 2025/7/15 5:04:34

JavaScript高级程序设计基础（五）

上接语言基础：JavaScript高级程序设计基础（四） 本节内容较简单，有一定语言基础的可以跳过 2.5 语句 2.5.1 if语句具体作用不做过多赘述。需要注意的是，在判断条件里会自动调用Boolean()；并且在执行语句…...

编程日记 2025/7/20 22:46:48

Stable Diffusion 3 部署笔记

SD3下载地址：https://huggingface.co/stabilityai/stable-diffusion-3-medium/tree/main https://huggingface.co/spaces/stabilityai/stable-diffusion-3-medium comfyui 教程： 深度测评：SD3模型表现如何？实用教程助你玩转Stabl…...

编程日记 2025/7/21 11:03:42

深度解析：Vue 自定义指令到底是什么？快来了解

自定义指令的概述在Vue中，自定义指令是开发者自定义的，用来在DOM元素上执行特定操作的功能。Vue本身提供了多种内建指令（如v-bind, v-model, v-for, v-if等），但有时候我们需要创建自己的指令来实现一些特殊功能。这些功能可以是对DOM的直接操作，或者是为了满足特定的业…...

编程日记 2025/7/19 20:04:41

CVE-2022-4230

打开什么都没有使用dirsearch扫描到一个wp-admin 访问wp-admin是一个登陆页面账号密码都在标题中登陆后是这个页面在WP Statistics < 13.2.9 – 经过身份验证的 SQLi |CVE 2022-4230 |插件漏洞 (wpscan.com)中，里边有一段对漏洞的描述。 https://wpscan.com…...

编程日记 2025/7/21 6:17:38

什么是 WPF 中的依赖属性？有什么作用？

依赖属性（Dependency Property）是 WPF 的一个核心概念，它为传统的 .NET 属性提供了增强功能，支持绑定、样式、动画和默认值等功能。通过依赖属性，WPF 提供了一种灵活的数据驱动的方式来处理 UI 属性。 1. 什么是依赖属…...

编程日记 2025/7/18 19:30:23

『 Linux 』网络层 - IP协议 (二)

文章目录路由NAT技术分片与组装分片的组装IP协议分片的短板路由通常情况路由器具备了一个非常重要的功能,即构建子网; 同时路由器需要实现跨网络通信,说明路由器必须存在两个或以上的IP地址,通常在路由器中可以看到几个接口,分别是一个WAN口和几个LAN口; WAN口IP被称为公网I…...

编程日记 2025/7/16 14:56:09

Linux开发者的CI/CD（11）jenkins变量

文章目录 1. **环境变量 (Environment Variables)**常见的环境变量：示例：2. **构建参数 (Build Parameters)**常见的构建参数类型：示例：3 **在 `stages` 块内定义局部变量**示例：使用 `script` 步骤定义局部变量4 变量引用陷阱在 Jenkins 中，变量是自动化流程中非常重要的…...

编程日记 2025/7/16 15:15:01

Python和R荧光分光光度法

🌵Python片段 Python在处理荧光分光光度法数据方面非常强大，得益于其丰富的数据处理和可视化库，可以轻松实现从数据读取到分析的完整流程。荧光分光光度法用于测量物质在激发光照射下发出的荧光强度，常用于定量分析和特性研究。 …...

编程日记 2025/7/20 15:19:20

理解clickhouse 里的分区和分片键区别

文章目录分片分区两分片，0副本的cluster 分片 CREATE TABLE logs_distributed AS logs_local ENGINE Distributed(cluster_name, -- 集群名称database_name, -- 数据库名称logs_local, -- 本地表名cityHash64(user_id) -- 分片键&#xf…...

编程日记 2025/7/19 21:52:26

【数据结构笔记】习题

渐进分析【2010-THU-Mid】f(n) O(g(n))，当且仅当g(n) Ω(f(n))。（√） 【2010-THU-Mid】若f(n) O(n^2)且g(n) O(n)，则以下结论正确的是（AD） A. f(n) g(n) O(n^2) B. f(n) / g(n) O(n) C. g(n) O(f(…...

编程日记 2025/7/19 1:10:46