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

微信小程序中 vant weapp 使用外部的icon作为图标的步骤

微信小程序中 vant weapp 使用外部的icon作为图标的步骤

  • 1. 在项目中创建静态资源文件夹
  • 2. 前往iconfont图标官网,添加图标并拷贝在线链接
  • 3. 下载iconfont代码,解压之后拷贝到小程序的目录中
  • 4. 修改iconfont.wxss 将本地链接替换为在线链接
  • 5. 在项目的app.wxss全局样式文件中引入iconfont.wxss样式
  • 6. 页面使用,以van-icon为例
  • 7. 页面效果

1. 在项目中创建静态资源文件夹

首先在当前项目的根目录中,创建assets文件夹,用于存放静态资源,assets里面的文件夹可以自己定义,图片,css…

在这里插入图片描述

2. 前往iconfont图标官网,添加图标并拷贝在线链接

iconfont官网 https://www.iconfont.cn/

添加一个图标到iconfont项目中,点击生成在线链接,记得选unicode,然后再生成在线链接(待会儿会使用)

在这里插入图片描述
在这里插入图片描述

3. 下载iconfont代码,解压之后拷贝到小程序的目录中

接着将当前项目的代码下载下来

在这里插入图片描述

下载完毕之后,将压缩包解压,会得到类似下面的目录结构

在这里插入图片描述

将这些解压的资源全部拷贝到微信小程序的assets目录中,并且将iconfont.css重命名为iconfont.wxss (因为微信小程序不识别.css)

在这里插入图片描述

4. 修改iconfont.wxss 将本地链接替换为在线链接

然后对iconfont.wxss进行编辑修改,将刚刚复制的在线链接,替换掉本地的链接

在这里插入图片描述

5. 在项目的app.wxss全局样式文件中引入iconfont.wxss样式

在app.wxss中,使用@import 将wxss样式导入

/*用自己项目的路径啊,这只是我的项目的路径*/
@import './assets/iconfont/iconfont.wxss'; 

6. 页面使用,以van-icon为例

<van-icon  class="iconfont" class-prefix="icon" name="duihuazixun"  />
  1. class = “iconfont” 代表的就是 iconfont 这个类
  2. class-prefix = “icon” 代表的是 样式的前缀 为 icon
  3. name = “duihuazixun” 表示的就是某个图标

可以打开iconfont的项目设置进行对比观察就一目了然了

在这里插入图片描述

tips :补充一句,使用其他标签引入icon时,语法如下

<text class="iconfont icon-duihuazixun"></text>

7. 页面效果

页面显示效果(我这里为了方便截图,将图标的尺寸调大了一些)

在这里插入图片描述


相关文章:

微信小程序中 vant weapp 使用外部的icon作为图标的步骤

微信小程序中 vant weapp 使用外部的icon作为图标的步骤 1. 在项目中创建静态资源文件夹2. 前往iconfont图标官网&#xff0c;添加图标并拷贝在线链接3. 下载iconfont代码&#xff0c;解压之后拷贝到小程序的目录中4. 修改iconfont.wxss 将本地链接替换为在线链接5. 在项目的ap…...

[npm]脚手架本地全局安装1

[npm]脚手架本地全局安装1 npm link 全局安装npm install 全局安装卸载全局安装的脚手架 该文章是你的脚手架已经开发完成的前提下&#xff0c;你想要本地全局安装该脚手架&#xff0c;便于本地使用脚手架的命令的情况 npm link 全局安装 如果本地开发的项目是个脚手架&#…...

2023学习计划

1.把vue3学习完&#xff0c;照着视频把示例都走一遍 2.完整地学习完springboot 3.刷题&#xff0c;写算法题。每天2道左右 4.看书《数据结构与算法之美》《高性能SQL》 5.复习JavaSE&#xff0c;把基础知识再过一遍 6.学习Redis&#xff0c;看视频&#xff0c;走示例 7.M…...

网络编程(一):服务器模型、Java I/O模型、Reactor事件处理模型、I/O复用

文章目录 一、Socket和TCP/IP协议族的关系二、服务器模型1.C/S模型&#xff08;Client/Server Model&#xff09;2.P2P模型&#xff08;Peer-to-Peer Model&#xff09; 三、Java的I/O演进1.BIO&#xff08;阻塞&#xff09;&#xff08;1&#xff09;工作流程&#xff08;2&am…...

flyway适配高斯数据库

文章目录 flyway适配高斯数据库 flyway适配高斯数据库 flyway-core 源码版本&#xff1a;6.2.2 tag 由于高斯和postgresql使用的驱动都是一样的&#xff0c;所以基于flyway支持已有的postgresql数据库来改造 修改点如下&#xff1a; 1、PostgreSQLConnection 类中的 doRest…...

LVS keepalived实现高可用负载群集

目录 1 Keepalived及其工作原理 1.1 Keepalived体系主要模块及其作用&#xff1a; 2 LVSKeepalived 高可用群集部署 2.1 配置负载调度器&#xff08;主、备相同&#xff09; 2.1.1 配置keeplived&#xff08;主、备DR 服务器上都要设置&#xff09; 2.1.2 启动 ipvsadm 服…...

HTTP RESTFul RPC

一、简介 &#xff08;1&#xff09;HTTP&#xff08;Hypertext Transfer Protocol&#xff09;是一种应用层协议。它经常用于在Web和服务器之间通讯&#xff0c;或服务与服务之间通讯。 &#xff08;2&#xff09;RESTFul 约束HTTP协议实现上的规范设计。 &#xff08;3&am…...

短视频seo矩阵系统源码开发搭建--代用户发布视频能力

短视频SEO矩阵系统源码开发搭建的代用户发布视频能力&#xff0c;主要是指在系统平台上&#xff0c;允许用户将其创作的内容发布到指定的账号或平台&#xff0c;并设置好相关的标题、话题、锚点等信息。 一、搭建步骤及注意事项 确定使用场景。根据业务需求&#xff0c;确定该…...

真实的产品开发中,后端的设计规约可以写哪些

真实的产品开发中&#xff0c;后端的设计规约可以写哪些 产品开发的后端设计规约通常包括以下内容&#xff1a; 数据模型设计&#xff1a;详细描述数据库的结构&#xff0c;包括数据表的设计、字段的定义和关系的设置等。 业务逻辑设计&#xff1a;详细描述后端的业务逻辑&a…...

Pytorch 多卡并行(2)—— 使用 torchrun 进行容错处理

前文 Pytorch 多卡并行&#xff08;1&#xff09;—— 原理简介和 DDP 并行实践 介绍了使用 Pytorch 的 DDP 库进行单机多卡训练的方法&#xff0c;本文进一步说明如何用 torchrun 改写前文代码&#xff0c;以提高模型训练的效率和容错性torchrun 是从 Pytorch 1.9.0 开始引入的…...

Java异常处理(详解)

Java异常处理 前言一、异常与异常类1.异常的概念2.异常类Error类Exception类&#xff08;1&#xff09;非检查异常&#xff08;2&#xff09;检查异常 二、异常处理1.异常的抛出与捕获2.try-catch-finally语句3.声明方法抛出异常3.用throw 语句抛出异常 三、自定义异常类 前言 …...

嵌入式-数据进制之间的转换

目录 一.简介 1.1十进制 1.2二进制 1.3八进制 1.4十六进制 二.进制转换 2.1二进制-十进制转换 2.2八进制-十进制转换 2.3十六进制-十进制转换 2.4十进制-二进制转换 2.5十进制-八进制转换 2.6十进制-十六进制转换 2.7小数部分转换 一.简介 被传入到计算机的数据要…...

腾讯mini项目-【指标监控服务重构】2023-08-20

今日已办 PPT制作 答辩流程 概述&#xff1a;对项目背景、架构进行介绍&#xff08;体现我们分组的区别和需求&#xff09;人员&#xff1a;小组成员进行简短的自我介绍和在项目中的定位&#xff0c;分工进展&#xff1a;对项目进展介绍&#xff0c;其中a、b两组的区别和工作…...

智能文本纠错API的应用与工作原理解析

引言 在数字时代&#xff0c;文本撰写和传播变得日益重要&#xff0c;无论是在学校里写论文、在职场中发送邮件&#xff0c;还是在社交媒体上发表观点。然而&#xff0c;文字错误、标点符号错误、语法问题和不当的表达常常会削弱文本的质量&#xff0c;降低信息传达的效果。为…...

在springboot下将mybatis升级为mybatis-plus

在springboot下将mybatis升级为mybatis-plus 1. 整体描述2. 具体步骤2.1 更新pom引用2.2 更新yml配置2.3 更新config配置2.4 BaseEntity修改 3. 程序启动4. 总结 1. 整体描述 之前项目工程用的是mybatis&#xff0c;现在需要将其替换为mybatis-plus&#xff0c;mybatis-plus的…...

Vuex详解:Vue.js的状态管理方案

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…...

栈与队列经典题目——用队列实现栈

本篇文章讲解栈和队列这一部分知识点的经典题目&#xff1a;用栈实现队列、用队列实现栈。对应的题号分别为&#xff1a;Leetcode.225——用队列实现栈&#xff0c;。 在对两个题目进行解释之前&#xff0c;先回顾以下栈和队列的特点与不同&#xff1a; 栈是一种特殊的线性表…...

Python stomp 发送消息无法显示文本

我们向消息服务器通过 stomp 发送的是文本消息。 当消息服务器发送成功后&#xff0c;消息服务器上的文本没有显示&#xff0c;显示的是 2 进制的数据。 如上图&#xff0c;消息没有作为文本来显示。 问题和解决 消息服务器是如何判断发送的小时是文本还是二进制的。 根据官…...

postgresql-视图

postgresql-视图 视图概述使用视图的好处 创建视图修改视图删除视图递归视图可更新视图WITH CHECK OPTION 视图概述 视图&#xff08;View&#xff09;本质上是一个存储在数据库中的查询语句。视图本身不包含数据&#xff0c;也被称为 虚拟表。我们在创建视图时给它指定了一个…...

科技资讯|Vision Pro头显无损音频仅限USB-C AirPods Pro 2耳机

彭博社的马克・古尔曼在最新发布的推文中表示&#xff0c;苹果 Vision Pro 头显的无损音频仅限于 USB-C AirPods Pro 2 耳机。 新款采用 USB-C 的 AirPods Pro 2 升级到了 IP54 级别&#xff08;原版不防尘&#xff0c;仅 IPX4 级抗水&#xff09;&#xff0c;可陪伴用户在恶劣…...

从SuperGlue到LoFTR:无检测器特征匹配是如何“卷”出来的?技术演进深度解读

从SuperGlue到LoFTR&#xff1a;无检测器特征匹配的技术革命与范式迁移 在计算机视觉领域&#xff0c;特征匹配一直是三维重建、SLAM、图像配准等任务的核心基础。传统方法如SIFT、ORB等基于手工设计的特征检测与描述算法&#xff0c;在过去二十年里主导了这一领域。然而&#…...

大模型私有化不是选型,是生存!Python工程师必须在Q3前掌握的5类国产化适配方案,否则明年项目全卡审批

第一章&#xff1a;大模型私有化是Python工程师的生存分水岭当企业开始将大语言模型从公有云API转向本地GPU集群部署&#xff0c;Python工程师的角色正经历一次静默但深刻的重构——不再只是调用requests.post()封装接口&#xff0c;而是要亲手构建模型加载、推理服务、权限控制…...

AceCommon:Arduino嵌入式零堆分配轻量C++工具库

1. AceCommon 库概述&#xff1a;面向嵌入式 Arduino 的轻量级底层工具集AceCommon 是一个专为资源受限的微控制器平台&#xff08;尤其是 Arduino 生态&#xff09;设计的零依赖、低开销 C 工具库。其核心设计哲学是“小而精、无侵入、可复用”。与常见的功能臃肿、依赖繁杂的…...

CentOS7下SSD性能调优实战:iostat与dd命令的黄金组合

CentOS7下SSD性能调优实战&#xff1a;iostat与dd命令的黄金组合 在当今数据驱动的时代&#xff0c;存储性能往往成为系统瓶颈的关键所在。对于使用CentOS7系统的运维工程师来说&#xff0c;如何充分释放SSD硬件的性能潜力&#xff0c;是一个既具挑战性又充满成就感的技术课题。…...

OpenClaw跨平台同步:GLM-4.7-Flash配置在多设备间保持一致

OpenClaw跨平台同步&#xff1a;GLM-4.7-Flash配置在多设备间保持一致 1. 为什么需要跨设备同步OpenClaw配置 上周我在出差时遇到一个尴尬场景&#xff1a;笔记本上的OpenClaw突然无法响应飞书消息&#xff0c;而所有配置都留在办公室的台式机上。这让我意识到——当AI助手成…...

OpCore-Simplify终极指南:零代码自动化黑苹果EFI配置实战

OpCore-Simplify终极指南&#xff1a;零代码自动化黑苹果EFI配置实战 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 在macOS生态之外构建黑苹果系统&…...

遇到‘Got minus one from a read call‘别慌!Oracle 12c连接数优化全攻略

深度解析Oracle 12c连接数优化&#xff1a;从"Got minus one from a read call"到高可用架构 当Java应用突然抛出java.sql.SQLRecoverableException: IO Error: Got minus one from a read call异常时&#xff0c;这往往是数据库连接资源耗尽的信号。本文将带您深入O…...

python-flask-djangol框架的关爱空巢老人和孩子留守儿童管理系统的设计和实现

目录需求分析与规划技术选型核心模块设计数据安全与权限开发与测试计划社区与可持续性项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作需求分析与规划 明确系统核心功能模块&#xff1a;空巢老人健康监测、留守儿童学习与心理辅…...

硬盘监控与健康管理:DiskInfo全方位使用指南

硬盘监控与健康管理&#xff1a;DiskInfo全方位使用指南 【免费下载链接】DiskInfo DiskInfo based on CrystalDiskInfo 项目地址: https://gitcode.com/gh_mirrors/di/DiskInfo 在数字化时代&#xff0c;硬盘故障可能导致珍贵数据永久丢失。DiskInfo作为一款基于Crysta…...

提升钱包开发效率:用快马AI一键生成imToken风格的高复用UI组件

提升钱包开发效率&#xff1a;用快马AI一键生成imToken风格的高复用UI组件 开发钱包类应用时&#xff0c;最让人头疼的就是那些重复性的UI组件和交互逻辑。每次新项目都要从零开始写资产卡片、交易记录列表、二维码弹窗这些基础组件&#xff0c;不仅耗时耗力&#xff0c;还容易…...