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

uniapp引入自定义图标

news 2026/5/16 7:38:15

目录

一、选择图标，加入购物车

二、下载到本地

三、导入项目

四、修改字体引用路径

五、开始使用

这里以扩展iconfont图标为例

官网：iconfont-阿里巴巴矢量图标库

一、选择图标，加入购物车

二、下载到本地

直接点击下载素材，网站就会自动将我们加入购物车的图标一起打包下载到本地

解压之后的文件夹

三、导入项目

将iconfont.css、iconfont.ttf导入到uniapp项目中，建议放到static目录下

笔者是在static目录下建了iconfont的文件夹，专门存放iconfont相关资源的

四、修改字体引用路径

修改iconfont.css中字体的引用位置，改为我们存放iconfont.ttf文件的位置

src: url('/static/iconfont/iconfont.ttf') format('truetype');

五、开始使用

在App.vue中引入iconfont.css样式文件，注意要改为自己的存放路径

使用 custom-prefix 和 type 属性自定义图标

<uni-icons custom-prefix="iconfont" type="icon-setting" size="30"></uni-icons>

六、注意事项

有时候我们上iconfont搜索图标时，可能搜索的关键词是中午，那么出现的图标都是中文命名的，如下图，那如果我们需要到这类图标，在uniapp中又是怎么引用的呢？

将图标加入到项目中，然后点击编辑图标，我们就可以看到图标的一些基本信息，当然我们也可以在这个面板操作这个图标

图标名称也就是我们展示的图标名称，但是不是uniapp中引用的图标名称（曾经的我还天真的以为改这个名称，然后在uniapp中引用同样的名称就可以了，哈哈哈哈哈）

右边红色框起来的部分才是uniapp中实际引用的icon名称，如果是想改uniapp中引用icon图标名称一定是要改这里的

相关文章：

uniapp引入自定义图标

目录 一、选择图标&#xff0c;加入购物车 二、下载到本地 三、导入项目 四、修改字体引用路径 五、开始使用 这里以扩展iconfont图标为例 官网&#xff1a;iconfont-阿里巴巴矢量图标库 一、选择图标&#xff0c;加入购物车 二、下载到本地 直接点击下载素材&#xff0…...

编程日记 2024/7/27 2:55:55

pytorch-scheduler（调度器）

scheduler简介 scheduler（调度器）是一种用于调整优化算法中学习率的机制。学习率是控制模型参数更新幅度的关键超参数，而调度器根据预定的策略在训练过程中动态地调整学习率。 优化器负责根据损失函数的梯度更新模型的参数，而调度器则负责调整优化过程中使用的特定参数，通…...

编程日记 2024/7/27 2:54:54

防火墙与入侵检测系统（IDS/IPS）在现代网络安全中的关键角色

在数字化日益加速的今天&#xff0c;网络安全变得尤为重要。随着网络攻击的复杂性和频率不断增加&#xff0c;保护关键信息资产已成为各大小组织的首要任务。防火墙&#xff08;Firewall&#xff09;和入侵检测系统&#xff08;Intrusion Detection System&#xff0c;IDS&…...

编程日记 2024/7/27 2:50:50

Python 之 os、open、json、pickle 模块的“疯狂”探险记

1.open函数的使用 Python 中的 open() 函数是处理文件的标准方法。它允许你打开一个文件&#xff0c;并对其进行读取、写入或追加操作 open(file,mode,encoding)函数的格式&#xff1a;file&#xff1a;文件路径 mode&#xff1a;打开方式&#xff08;读&#xff1a; r写&…...

编程日记 2024/7/27 2:48:48

CTF-Web习题：2019强网杯 UPLOAD

题目链接&#xff1a;2019强网杯 UPLOAD 解题思路 打开靶场如下图所示&#xff0c;是一个注册和登录界面 那就注册登录一下&#xff0c;发现是一个提交头像的页面&#xff1a; 试了一下只有能正确显示的png图片才能提交成功&#xff0c;同时F12拿到cookie&#xff0c;base6…...

编程日记 2024/7/27 2:46:46

Unity环境渲染与反射探针的深入探索

目录 环境渲染基础 光源设置 材质与光照贴图 反射探针&#xff08;Reflection Probes&#xff09;详解 反射探针的创建与配置 材质中的反射探针设置 实践案例 实践案例&#xff1a;室内场景中的反射效果 场景设置 反射探针配置 Unity代码示例&#xff08;非直接配置…...

编程日记 2024/7/27 2:45:44

vue3 父组件 props 异步传值，子组件接收不到或接收错误

1. 使用场景 我们在子组件中通常需要调用父组件的数据&#xff0c;此时需要使用 vue3 的 props 进行父子组件通信传值。 2. 问题描述 那么此时问题来了&#xff0c;在使用 props 进行父子组件通信时&#xff0c;因为数据传递是异步的&#xff0c;导致子组件无法成功获取数据…...

编程日记 2024/7/27 2:44:43

[C++]TinyWebServer

TinyWebServer 文章目录 TinyWebServer1 主体框架2 Buffer2.1 向Buffer写入数据2.2 从Buffer读取数据2.3 动态扩容2.4 从socket中读取数据2.5 具体实现 3 日志系统3.1 生产者-消费者模型3.2 数据一致3.3 代码 4 定时器4.1 调整堆中元素操作4.2 堆的操作4.2.1 增4.2.2 删4.2.3 改…...

编程日记 2024/7/27 2:39:38

Uniswap价格批量查询与ws订阅行情

Uniswap价格批量查询与ws订阅行情 由于 Uniswap V1 版本必须包含 ETH 所以两个 token 之间交换必须先换成 ETH 去中转效率很低已经弃用了 由于 V3 版本 CLMM 和 V4 版本的 DLMM 数学模型过于复杂&#xff0c;还是先从 AMM 模型的 V2 进行入门和学习 Uniswap 三种合约 Unisw…...

编程日记 2024/7/27 2:33:31

vue 实战 区域内小组件元素拖拽 示例

<template><div><el-button type"primary" click"showDialog true">快捷布局</el-button><el-dialog title"快捷布局配置" :visible.sync"showDialog"><el-row :gutter"20"><el-co…...

编程日记 2024/7/27 2:31:30

C++多线程编程中的锁详解

在现代软件开发中&#xff0c;多线程编程是提升应用程序性能和响应能力的重要手段。然而&#xff0c;多线程编程也带来了数据竞争和死锁等复杂问题。为了确保线程间的同步和共享数据的一致性&#xff0c;C标准库提供了多种锁机制。 1. std::mutex std::mutex是最基础的互斥锁…...

编程日记 2024/7/27 2:30:29

van-dialog 组件调用报错

报错截图 报错原因 这个警告表明 vue 在渲染页面时遇到了一个未知的自定义组件 <van-dialog>&#xff0c;并且提示可能是由于未正确注册该组件导致的。在 vue 中&#xff0c;当我们使用自定义组件时&#xff0c;需要先在 vue 实例中注册这些组件&#xff0c;以便 vue 能…...

编程日记 2024/7/27 2:29:28

【Django】在vscode中运行调试Django项目（命令及图形方式）

文章目录 命令方式图形方式默认8000端口设置自定义端口 命令方式 python manage.py runserver图形方式 默认8000端口 设置自定义端口...

编程日记 2024/7/27 2:27:26

麦田物语第十三天

系列文章目录 麦田物语第十三天 文章目录 系列文章目录一、实现根据物品详情显示 ItemTooltip1.ItemTooltips脚本编写二、制作 Player 的动画一、实现根据物品详情显示 ItemTooltip 1.ItemTooltips脚本编写 首先创建Scripts->Inventory->UI->ItemTooltip脚本，然后…...

编程日记 2024/7/27 2:25:23

【Git多人协作开发】不同的分支下的多人协作开发模式

目录 0.前言背景 1.开发者1☞完成准备工作&协作开发 1.1查看分支情况 1.2创建本地分支feature-1 1.3三板斧 1.4push推本地分支feature-1到远程仓库 2.开发者2☞完成准备工作&协作开发 2.1创建本地分支feature-2 2.2三板斧 2.2push推送本地feature-2到远程仓库…...

编程日记 2024/7/27 2:21:19

Lua 复数计算器

Lua复数计算器 主要包括复数的加减乘除操作&#xff0c;以及打印 编写复数类 -- ***** 元类 ***** Complex {real 0, imag 0}-- 构造函数 function Complex:new(real, imag)local o o or {}o.real real or 0o.imag imag or 0setmetatable(o, self)self.__index selfr…...

编程日记 2024/7/27 2:20:18

深入MySQL中的IF和IFNULL函数

在数据库查询中&#xff0c;我们经常需要根据条件来决定数据的显示方式。MySQL提供了多种内置函数来帮助我们实现这种条件逻辑&#xff0c;其中IF和IFNULL是两个非常有用的函数。在这篇博客中&#xff0c;我们将深入探讨这两个函数的用法和它们在实际查询中的应用。 IF函数 I…...

编程日记 2024/7/27 2:17:13

AI多模态实战教程：面壁智能MiniCPM-V多模态大模型问答交互、llama.cpp模型量化和推理

一、项目简介 MiniCPM-V 系列是专为视觉-语⾔理解设计的多模态⼤型语⾔模型&#xff08;MLLMs&#xff09;&#xff0c;提供⾼质量的⽂本输出&#xff0c;已发布4个版本。 1.1 主要模型及特性 &#xff08;1&#xff09;MiniCPM-Llama3-V 2.5&#xff1a; 参数规模: 8B性能…...

编程日记 2024/7/27 2:12:08

Docker 搭建Elasticsearch详细步骤

本章教程使用Docker搭建Elasticsearch环境。 一、拉取镜像 docker pull docker.elastic.co/elasticsearch/elasticsearch:8.8.2二、运行容器 docker run -d --name elasticsearch -p 9200:9200 -p 9300:9300 -e "discovery.type=single-n...

编程日记 2024/7/27 2:09:05

mysql中提供的函数

文章目录 1.聚合函数2.字符串函数3.数值函数4.日期函数5.流程函数 MySQL 是一个功能强大的关系型数据库管理系统&#xff0c;其中包含了丰富的内置函数&#xff0c;用于处理各种数据操作和查询。这些函数可以分为多种类型&#xff0c;包括字符串函数、数值函数、日期和时间函数…...

编程日记 2024/7/27 2:07:03

PlantUML Editor：用代码思维重塑UML绘图的现代工具

PlantUML Editor&#xff1a;用代码思维重塑UML绘图的现代工具 【免费下载链接】plantuml-editor PlantUML online demo client 项目地址: https://gitcode.com/gh_mirrors/pl/plantuml-editor 你是否厌倦了传统拖拽式UML工具的繁琐操作&#xff1f;PlantUML Editor将彻…...

编程新知 2026/5/16 7:33:53

DPDK 教程（四）：Offload、Flow、NUMA、IOVA 与性能剖析

DPDK 教程&#xff08;四&#xff09;&#xff1a;Offload、Flow、NUMA、IOVA 与性能剖析 本文对应学习路径第四步&#xff1a;在已能跑通 多队列转发 后&#xff0c;把系统从“能跑”推到“可解释、可优化”。重点放在&#xff1a;硬件卸载的正确语义、Flow 与 RSS 的分工、NU…...

编程新知 2026/5/16 7:07:38

RAG已死？收藏这篇，小白程序员必看：上下文工程才是大模型未来！

本文探讨了围绕RAG技术的争议&#xff0c;分析了三种不同观点&#xff1a;RAG正进化为更智能的检索系统、RAG已成为核心工程学科、RAG正被长上下文和智能体取代。文章指出&#xff0c;简单的RAG已过时&#xff0c;但提供外部知识的需求依然存在&#xff0c;未来RAG将作为组件之…...

编程新知 2026/5/16 7:00:53

【c++面向对象编程】第22篇：输入输出运算符重载：＜＜ 与 ＞＞ 的友元实现

目录 一、为什么不能是成员函数&#xff1f; 二、标准写法&#xff08;两步法&#xff09; 第1步&#xff1a;在类中声明友元函数 第2步&#xff1a;实现全局函数 三、为什么要返回引用&#xff1f; 支持链式输出 正确 vs 错误示例 四、为什么需要友元&#xff1f;能否不…...

编程新知 2026/5/16 6:06:27

基于计算机视觉的屏幕内容智能识别与自动化实践

1. 项目概述&#xff1a;当屏幕成为你的“眼睛”最近在折腾一个挺有意思的项目&#xff0c;我把它叫做“Screen Vision”&#xff0c;直译过来就是“屏幕视觉”。这名字听起来有点玄乎&#xff0c;但核心想法其实很直接&#xff1a;让计算机程序能像人一样&#xff0c;“看懂”…...

编程新知 2026/5/16 5:54:55

将taotoken集成到自动化工作流中提升内容生成效率

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 将taotoken集成到自动化工作流中提升内容生成效率 对于内容创作或社交媒体运营团队而言&#xff0c;保持高质量内容的持续输出是一…...

编程新知 2026/5/16 5:29:36

架构设计实战指南：在约束中做取舍的工程智慧

架构设计实战指南&#xff1a;在约束中做取舍的工程智慧 版本&#xff1a;V1.0 适合人群&#xff1a;开发工程师、架构师、技术负责人、CTO、技术出身的创业者写在前面&#xff1a;你是不是也遇到过这些问题&#xff1f; 如果你是开发工程师&#xff1a; 刚写完的代码&#xff…...

编程新知 2026/5/16 4:00:28

华硕游侠2-RX键盘多功能滚轮自定义M失效的解决方案

新买了一块游侠2 rx键盘&#xff0c;想着用自定义滚轮方便打开常用程序&#xff0c;但是发现在Armoury Crate中设置后不起作用&#xff0c;网上解决方案伤筋动骨&#xff0c;得不偿失&#xff0c;有一定风险。 经测试&#xff0c;自定义滚轮能正常执行宏定义&#xff0c;只是对…...

编程新知 2026/5/16 3:47:18

Java 枚举类型：3个经典应用场景与实战案例

Java 枚举类型&#xff1a;3个经典应用场景与实战案例枚举&#xff08; enum &#xff09;是 Java 中一种特殊的类&#xff0c;它通过固定的常量集合来表示有限且离散的状态&#xff0c;不仅能提升代码可读性&#xff0c;还能避免魔法值、减少错误&#xff0c;是后端开发中非常…...

编程新知 2026/5/16 3:43:02

千问 LeetCode 2402.会议室 III public int mostBooked(int n, int[][] meetings)

这道题是经典的会议室 III&#xff0c;核心是双堆模拟&#xff0c;一个堆管空闲会议室&#xff08;按编号排序&#xff09;&#xff0c;一个堆管正在使用的会议室&#xff08;按结束时间排序&#xff09;。解题思路1. 排序&#xff1a;按会议开始时间升序排列。 2. 双堆初始化&…...

编程新知 2026/5/16 1:52:34