在微信小程序中如何引入iconfont

news2025/1/11 17:48:51

目录

  • 前言
  • iconfont 介绍
  • iconfont 组建图标库并下载
    • 1. 通过 iconfont 可组建自己的图标库
    • 2. 项目设置:生成base64格式的字体
    • 3. 下载至本地
    • 4. 解压备用
  • 将 iconfont 添加到小程序中
    • 1. 将css该名称wxss
    • 2. 将文件复制到font目录
    • 3. 在app.wxss文件中引入iconfont文件
  • 在小程序中使用字体

前言

iconfont 介绍

iconfont 指 https://www.iconfont.cn/。
通过 iconfont 可组建自己的图标库。

iconfont 组建图标库并下载

1. 通过 iconfont 可组建自己的图标库

  • 注册帐号
  • 创建项目
  • 添加图标

2. 项目设置:生成base64格式的字体

在这里插入图片描述

  • Font Family:默认为iconfont。当项目中已有iconfont名称的字体时,需要使用不同的名字。

3. 下载至本地

4. 解压备用

在这里插入图片描述

将 iconfont 添加到小程序中

1. 将css该名称wxss

iconfont.css重命名为iconfont20231007.wxss

2. 将文件复制到font目录

iconfont20231007.wxss文件复制到小程序的font目录(没有该目录时,可手动创建。其它目录也可以,比较灵活)。
在这里插入图片描述

3. 在app.wxss文件中引入iconfont文件

@import 'font/iconfont20231007.wxss';

在这里插入图片描述

在小程序中使用字体

<view>首页
<text class="iconfont20231007 icon-zhankai"></text>
</view>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1067895.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Vue中如何进行分布式日志收集与日志分析(如ELK Stack)

在Vue中实现分布式日志收集与日志分析&#xff08;使用ELK Stack&#xff09; 日志收集和分析在现代应用程序中是至关重要的&#xff0c;它们可以帮助开发人员监视和诊断应用程序的行为&#xff0c;从而提高应用程序的稳定性和性能。ELK Stack&#xff08;Elasticsearch、Logs…

矩阵的相似性度量的常用方法

矩阵的相似性度量的常用方法 1&#xff0c;欧氏距离 欧式距离是最易于理解的一种距离计算方法&#xff0c;源自欧式空间中两点间的距离公式。 (1)二维平面上的点 a ( x 1 , y 1 ) a(x_1,y_1) a(x1​,y1​)和点 b ( x 2 , y 2 ) b(x_2,y_2) b(x2​,y2​)的欧式距离为 d ( x …

Langchain-Chatchat项目:3-Langchain计算器工具Agent思路和实现

本文主要讨论Langchain-Chatchat项目中自定义Agent问答的思路和实现。以"计算器工具"为例&#xff0c;简单理解就是通过LLM识别应该使用的工具类型&#xff0c;然后交给相应的工具&#xff08;也是LLM模型&#xff09;来解决问题。一个LLM模型可以充当不同的角色&…

Spring AOP(JavaEE进阶系列5)

目录 前言&#xff1a; 1.什么是Spring AOP 2.为什么要使用AOP呢&#xff1f; 3.AOP的组成 3.1切面 3.2切点 3.3通知 3.4连接点 4.Spring AOP的实现 4.1添加依赖 4.2定义切面 4.3定义切点 4.4实现通知 5.AOP的实现原理 结束语&#xff1a; 前言&#xff1a; 在…

光伏VSG-基于虚拟同步发电机的光伏并网逆变器系统(Simulink仿真)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

EfficientNetV2:更快、更小、更高精度

一、说明 EfficientNets是目前最强大的卷积神经网络&#xff08;CNN&#xff09;模型之一。随着视觉变压器的兴起&#xff0c;它实现了比高效网络更高的精度&#xff0c;出现了CNN现在是否正在消亡的问题。EfficientNetV2 不仅通过提高准确性&#xff0c;还通过减少训练时间和延…

Linux系统之部署h5ai目录列表程序

Linux系统之部署h5ai目录列表程序 一、h5ai介绍1.1 h5ai简介1.2 h5ai特点 二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍 三、检查本地环境3.1 检查本地操作系统版本3.2 检查系统内核版本 四、安装httpd软件4.1 检查yum仓库4.2 安装httpd软件4.3 启动httpd服务4.4 查看htt…

rabbitmq查看节点信息命令失败

不影响访问rabbitmq&#xff0c;但是无法使用 命令查看节点信息 等 查看节点信息命令&#xff1a;rabbitmq-diagnostics status --node rabbitJHComputer Error: unable to perform an operation on node ‘rabbitJHComputer‘. Please see diagnostics informatio rabbitmq-…

C++内存管理:其二、数组内存管理

一、new一个对象数组 如果我们想在堆内存上创建一个对象数组&#xff0c;可以这么写&#xff1a; Complex * pca new Complex[3]; 主要做三件事&#xff1a; &#xff08;1&#xff09;申请一块内存&#xff0c;足够放置三个Complex对象。 &#xff08;2&#xff09;执行三次…

(一)实现一个简易版IoC容器【手撸Spring】

一、前言 相信大家在看本篇文章的时候&#xff0c;对IoC应该有一个比较清晰的理解&#xff0c;我在这里再重新描述下&#xff1a;它的作用就是实现一个容器将一个个的Bean&#xff08;这里的Bean可以是一个Java的业务对象&#xff0c;也可以是一个配置对象&#xff09;统一管理…

无需公网IP,教学系统如何实现远程一站式管理维护?

全国多所高校应用红亚科技研发的一套教学实验系统平台&#xff0c;此实验系统服务器分别部署在学校内部&#xff0c;与校内的各种教学资源整合在一起&#xff0c;向校内师生提供服务。 红亚总部设立在北京&#xff0c;虽说在全国22个省会均设有办事处&#xff0c;在面对全国多…

MM-Camera架构-Preview 流程分析

目录 文章目录 1 log开的好&#xff0c;问题都能搞2 lib3 preview3.1 打开视频流3.1.1 cpp\_module\_start\_session3.1.2 cpp\_thread\_create3.1.3 cpp\_thread\_funcsundp-3.1 cpp\_hardware\_open\_subdev(ctrl->cpphw)sundp-3.2 cpp\_hardware\_process\_command(ctrl-…

ssm+vue的劳务外包管理系统(有报告)。Javaee项目,ssm vue前后端分离项目。

演示视频&#xff1a; ssmvue的劳务外包管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;ssm vue前后端分离项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&…

3BHB003154R0101 GVC707AE01 3BHB003149P201 3BHB003149P104 5SXE05-0156

3BHB003154R0101 GVC707AE01 3BHB003149P201 3BHB003149P104 5SXE05-0156 特征 IT/OT SOC是一种安全监控服务&#xff0c;它使用快速、可扩展和统一的下一代安全信息和事件管理(SIEM)。该服务使用各种CTI和ML工具从客户的IT/OT设备收集事件日志&#xff0c;以检测网络攻击、…

leetCode 300.最长递增子序列 (贪心 + 二分 ) + 图解 + 优化 + 拓展

300. 最长递增子序列 - 力扣&#xff08;LeetCode&#xff09; 给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序。例如&#xff…

Kafka 高可用

正文 一、高可用的由来 1.1 为何需要Replication 在Kafka在0.8以前的版本中&#xff0c;是没有Replication的&#xff0c;一旦某一个Broker宕机&#xff0c;则其上所有的Partition数据都不可被消费&#xff0c;这与Kafka数据持久性及Delivery Guarantee的设计目标相悖。同时Pr…

算法通关村第17关【青铜】| 贪心

贪心算法&#xff08;Greedy Algorithm&#xff09;是一种常见的算法设计策略&#xff0c;通常用于解决一类优化问题。其核心思想是&#xff1a;在每一步选择中都采取当前状态下的最优决策&#xff0c;从而希望最终能够达到全局最优解。贪心算法不像动态规划算法需要考虑各种子…

电暖产品经营小程序商城搭建

电暖产品的需求度很高&#xff0c;包括地暖系统及壁挂炉、水暖散热器等&#xff0c;尤其每年冬天&#xff0c;部分家庭或办公场所就会有相关需求&#xff0c;庞大市场下为电暖各领域商家及品牌带来了商机。 然而随着互联网深入各行业及实体店生意难做&#xff0c;无论品牌还是…

安卓RecycleView包含SeekBar点击列表底部圆形阴影处理

seekbar在列表中点击底部圆形阴影禁止显示方法 大家好&#xff0c;最近写了自定义的seekbar实现显示进度值&#xff0c;然而呢&#xff0c;我的seekbar控件是作为recycleview的item来使用的&#xff0c;我设置了禁止点击和滑动方法如下&#xff1a; seekBar.setOnTouchListene…

ubuntu使用whisper和funASR-语者分离-二值化

文章目录 一、选择系统1.1 更新环境 二、安装使用whisper2.1 创建环境2.1 安装2.1.1安装基础包2.1.2安装依赖 3测试13测试2 语着分离创建代码报错ModuleNotFoundError: No module named pyannote报错No module named pyannote_whisper 三、安装使用funASR1 安装1.1 安装 Conda&…