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

UniaApp引入Iconfont

一、下载图标资源

  1. 登录到阿里巴巴矢量图标库(iconfont)官网(https://www.iconfont.cn/)。
  2. 找到你需要的图标并添加到购物车,然后点击购物车图标进入到管理界面,选择 “下载代码”。
  3. 在下载选项中选择 “Font class” 方式进行下载,解压下载后的文件。

下载.png

二、将图标文件复制到项目中

  1. 将解压后的 iconfont.css(复制到 UniApp 项目的合适位置)

文件移到目录文件夹下.png
2.官网把这个代码复制下来,替换iconfont.css的这段代码
复制代码2.png
替换.png

三、在项目中引入 CSS 文件

  1. 在需要使用图标的页面的 Vue 文件中或者在项目的全局样式文件中(如 App.vue 中的 style 标签内或者单独的全局 CSS 文件)引入 iconfont.css 文件:
/* 在 App.vue 的 style 标签中或者全局 CSS 文件中 */@import "./assets/iconfont/iconfont.css";

四、使用图标

在页面的模板(template)中,通过 class 来使用图标

<template><view><i class="iconfont icon-your-icon-name"></i></view></template>

其中 icon-your-icon-name 是你在阿里巴巴矢量图标库中对应的图标的类名。
通过以上步骤,就可以在 UniApp 项目中成功引入并使用 iconfont 图标了。

五、小程序底部使用

直接下载png使用即可

相关文章:

UniaApp引入Iconfont

一、下载图标资源 登录到阿里巴巴矢量图标库&#xff08;iconfont&#xff09;官网&#xff08;https://www.iconfont.cn/&#xff09;。找到你需要的图标并添加到购物车&#xff0c;然后点击购物车图标进入到管理界面&#xff0c;选择 “下载代码”。在下载选项中选择 “Font…...

面试题:软件测试缺陷产生的原因有哪些?

软件缺陷产生的原因多种多样&#xff0c;一般可能有以下几种原因&#xff1a; 1.需求表述、理解、编写引起的错误。 2.系统架构设计引起的错误。 3.开发过程缺乏有效的沟通及监督&#xff0c;甚至没有沟通或监督。 4.程序员编程中产生的错误。 5.软件开发工具本身隐藏的问…...

RabbitMQ 04 集群

01...

axure9勾选多个删除,弹框显示多个中继器编号

文本框 情形是删除逗号 文本框内插入数据...

Git 使用指南 --- 版本管理

序言 Git 是一个开源的 分布式版本控制系统&#xff0c;可以有效、高速地处理从很小到非常大的项目版本管理。对一个程序员来说&#xff0c;掌握 Git 的使用是必要的。  在这个系列中&#xff0c;将详细的介绍 Git 的使用和原理&#xff0c;话不多说&#xff0c;让我们开始吧。…...

C#进阶-ASP.NET实现可以缩放和旋转的图片预览页

本文详细介绍了如何在ASP.NET WebForms中实现一个功能丰富的图片预览页面。通过结合HTML、CSS和JavaScript&#xff0c;用户可以方便地对图片进行放大、缩小以及旋转操作。文章从页面的基本布局开始&#xff0c;逐步讲解了如何设置图片展示区、添加控制按钮、编写CSS样式以及实…...

【小程序 - 大智慧】深入微信小程序的核心原理

目录 课程目标背景双线程架构WebView 结构快速渲染 PageFrame编译原理Exparser通讯系统生命周期基础库解包跨端框架预编译半编译半运行运行时框架 主流技术Tarouni-app汇总 下周安排 课程目标 本次课程主要通过后台管理小程序回顾一下小程序的高阶语法&#xff0c;然后讲解整体…...

Qt 去掉QDialog对话框的问号

QT 对话框的问号是什么&#xff1f; QDialog默认的window flag中包含了Qt::WindowContextHelpButtonHint,这个flag意思是在窗口上提供“上下文帮助”按钮 使用方式/调用方式 void QWidget::setWhatsThis(const QString &)比如&#xff1a; ui->lineEdit_1->setWh…...

负载均衡 Ribbon 与 Fegin 远程调用原理

文章目录 一、什么是负载均衡二、Ribbon 负载均衡2.1 Ribbon 使用2.2 Ribbon 实现原理 (★)2.3 Ribbon 负载均衡算法 三、Feign 远程调用3.1 Feign 简述3.2 Feign 的集成3.3 Feign 实现原理 (★) 一、什么是负载均衡 《服务治理&#xff1a;Nacos 注册中心》 末尾提到了负载均…...

c/c++:CMakeLists.txt中添加编译/连接选项使用内存错误检测工具Address Sanitizer(ASan)

Address Sanitizer(ASan)是一个快速的内存错误检测工具。从gcc 4.8开始&#xff0c;AddressSanitizer成为gcc的一部分。 既然是gcc内置的内存检查工具&#xff0c;用起来比第三方的库更方便些。只要指定相应的编译链接参数就可以实现内存泄露检查了&#xff0c;如下是是cmake脚…...

armbian cups 远程打印机 1022

使用 CUPS Web 浏览器界面设置和管理打印机 - Oracle Solaris 管理&#xff1a;常见任务 N1刷armbian变身打印服务器&#xff0c;支持全平台无线打印PC扫描_存储设备_什么值得买 (smzdm.com) 第 6 章 使用 Web 界面向 CUPS 添加打印机 | Red Hat Product Documentation apt…...

three.js使用3DTilesRendererJS加载3d tiles数据

原生的 three.js 目前不支持 3d tiles 数据的加载&#xff0c;不过开源社区已经给出了一些解决方案&#xff0c;其中最活跃的要属 3DTilesRendererJS。它为 three.js 提供了加载和调度 3d tiles 数据的基本能力&#xff0c;虽说和 Cesium.js 对 3d tiles 的支持相比还有很大的差…...

坐牢第三十五天(c++)

一.作业 1.使用模版类自定义栈 代码&#xff1a; #include <iostream> using namespace std; template<typename T> // 封装一个栈 class stcak { private:T *data; //int max_size; // 最大容量int top; // 下标 public:// 无参构造函数stcak();// 有参…...

Conda离线部署django

要在没有网络连接的环境中使用conda部署Django&#xff0c;你需要预先在有网络连接的机器上创建一个包含所有必要包的环境&#xff0c;并导出该环境的配置文件。然后&#xff0c;你可以将这个配置文件和必要的包传输到目标机器上进行安装。 下面是详细的步骤&#xff1a; 1. …...

1. Fabric.js安装使用

安装 # 安装 fabricjs npm i fabric --save在需要使用的页面引入 import * as fabric from fabric...

Excel中.xls和.xlsx文件格式的区别,及C++操作Excel文件

‌文件结构和兼容性‌&#xff1a; XLS是Excel 97-2003版本的文件格式&#xff0c;而XLSX是Excel 2007及以上版本的文件格式。XLS格式是向下兼容的&#xff0c;意味着较新的Excel版本可以打开XLS文件&#xff0c;但较旧的版本无法打开XLSX文件。相反&#xff0c;XLSX格式是向上…...

php实用命令

php相关命令 命令错误级别 命令 命令命令介绍具体用法php -v查看php版本php -vphp -l检查php文件是否有语法错误php -lphp -m查看当前php安装的扩展php -mphp -i | grep extension_dir查看扩展安装的目录php -i | grep extension_dir 错误级别 命令命令介绍具体用法error_re…...

TypeError:未绑定方法

TypeError: unbound method 错误通常发生在类方法被调用时&#xff0c;但没有正确绑定到实例。这通常意味着你试图在类本身上调用一个实例方法&#xff0c;或者没有使用正确的方式创建类实例。 1、问题背景 某位开发者在尝试创建一个类似于经典的 Pratt 递归下降解析器时遇到了…...

Java虚拟机(JVM)的架构和工作原理,字节码执行流程

JVM的概念 JVM是Java Virtual Machine的缩写&#xff0c; 即Java虚拟机&#xff0c;也被称为Java程序运行的核心环境 。它是一种用于计算设备的规范&#xff0c;‌通过在实际的计算机上仿真模拟各种计算机功能来实现。‌JVM由一套字节码指令集、‌一组寄存器、‌一个栈、‌一个…...

416.分割等和子集

416.分割等和子集 给你一个 只包含正整数 的 非空 数组 nums 。请你判断是否可以将这个数组分割成两个子集&#xff0c;使得两个子集的元素和相等。 示例 1&#xff1a; 输入&#xff1a;nums [1,5,11,5] 输出&#xff1a;true 解释&#xff1a;数组可以分割成 [1, 5, 5] 和…...

C++的std--span:非拥有式的连续内存视图

C的std::span&#xff1a;非拥有式的连续内存视图 在现代C编程中&#xff0c;高效且安全地处理连续内存数据是一项常见需求。传统方法通常依赖原始指针或迭代器&#xff0c;但这些方式容易引发越界访问或内存管理问题。C20引入的std::span为此提供了优雅的解决方案——它是一种…...

若依SpringCloud安全机制解析:从Token生成到权限验证的全流程

若依SpringCloud安全架构深度解析&#xff1a;从Token生成到权限验证的工程实践 在微服务架构中&#xff0c;安全机制的设计往往决定着整个系统的可靠性边界。若依(RuoYi)SpringCloud版本通过精巧的Token机制与分布式权限验证体系&#xff0c;为开发者提供了一套开箱即用的安全…...

为什么说“季中调拨”能力,决定了服装企业的生死时速?

在服装行业&#xff0c;有一句老话&#xff1a;“做得好是时装&#xff0c;做不好是库存。”过去&#xff0c;这句话更多指向季末的积压。但今天&#xff0c;随着消费节奏加快、流行周期被压缩到以“周”为单位&#xff0c;真正的决胜点已经前移——季中调拨。季中调拨&#xf…...

Wan2.2-I2V-A14B企业部署方案:对接Jenkins实现AI视频CI/CD自动化流程

Wan2.2-I2V-A14B企业部署方案&#xff1a;对接Jenkins实现AI视频CI/CD自动化流程 1. 方案概述 在当今内容创作和数字营销领域&#xff0c;视频内容的需求呈现爆发式增长。Wan2.2-I2V-A14B文生视频模型为企业提供了一种高效的内容生产方式&#xff0c;而将其集成到CI/CD流程中…...

3秒破解百度网盘提取码:提升资源获取效率的自动化工具指南

3秒破解百度网盘提取码&#xff1a;提升资源获取效率的自动化工具指南 【免费下载链接】baidupankey 项目地址: https://gitcode.com/gh_mirrors/ba/baidupankey 场景痛点&#xff1a;被提取码困住的数字生活 你是否经历过这样的场景&#xff1a;深夜赶项目时&#xf…...

如何防止SQL注入篡改应用配置_对数据库连接加密存储

能&#xff0c;但需满足配置存数据库且SQL未参数化&#xff1b;攻击者可通过拼接恶意语句读取、删表或篡改配置&#xff1b;加密须用外部KMS管理密钥&#xff0c;避免硬编码&#xff0c;并配合权限隔离、输入校验与TLS传输。SQL注入能直接改配置表吗&#xff1f;能&#xff0c;…...

如何分析网站SEO数据,优化营销策略

如何分析网站SEO数据&#xff0c;优化营销策略 在当今数字化营销的时代&#xff0c;网站的SEO数据分析不仅是提升网站排名的关键&#xff0c;更是优化整体营销策略的重要手段。本文将详细探讨如何通过分析网站SEO数据来优化营销策略&#xff0c;助力企业在竞争激烈的市场中脱颖…...

EagleEye DAMO-YOLO TinyNAS实战:基于YOLOv8的高效目标检测部署

EagleEye DAMO-YOLO TinyNAS实战&#xff1a;基于YOLOv8的高效目标检测部署 1. 引言 目标检测在实际应用中经常遇到一个难题&#xff1a;既要检测准确&#xff0c;又要运行速度快。传统的解决方案往往需要在精度和速度之间做出妥协&#xff0c;要么选择复杂的模型导致推理缓慢…...

大模型实习备战路线图:从入门到入职

现在95%的大模型实习岗位&#xff0c;都不是让你去从头“创造”一个GPT-5&#xff0c;而是让你基于现有的模型&#xff0c;去做各种“下游”工作。什么意思呢&#xff1f;大家想象中的大模型实习&#xff0c;可能是这样的&#xff1a;一排排A100/H100在你面前闪烁&#xff0c;你…...

想做市场品牌策划?这3大秘诀让你的品牌脱颖而出!

行业痛点分析当前品牌策划领域面临诸多技术挑战。许多企业有产品无品牌&#xff0c;产品品质过硬、技术领先&#xff0c;但缺乏清晰的品牌定位与价值表达&#xff0c;陷入 “酒香也怕巷子深” 的困境&#xff0c;只能靠低价竞争。数据表明&#xff0c;约 60%的企业因品牌定位不…...