uniapp引入自定义图标
目录
一、选择图标,加入购物车
二、下载到本地
三、导入项目
四、修改字体引用路径
五、开始使用
这里以扩展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引入自定义图标
目录 一、选择图标,加入购物车 二、下载到本地 三、导入项目 四、修改字体引用路径 五、开始使用 这里以扩展iconfont图标为例 官网:iconfont-阿里巴巴矢量图标库 一、选择图标,加入购物车 二、下载到本地 直接点击下载素材࿰…...
pytorch-scheduler(调度器)
scheduler简介 scheduler(调度器)是一种用于调整优化算法中学习率的机制。学习率是控制模型参数更新幅度的关键超参数,而调度器根据预定的策略在训练过程中动态地调整学习率。 优化器负责根据损失函数的梯度更新模型的参数,而调度器则负责调整优化过程中使用的特定参数,通…...
防火墙与入侵检测系统(IDS/IPS)在现代网络安全中的关键角色
在数字化日益加速的今天,网络安全变得尤为重要。随着网络攻击的复杂性和频率不断增加,保护关键信息资产已成为各大小组织的首要任务。防火墙(Firewall)和入侵检测系统(Intrusion Detection System,IDS&…...
Python 之 os、open、json、pickle 模块的“疯狂”探险记
1.open函数的使用 Python 中的 open() 函数是处理文件的标准方法。它允许你打开一个文件,并对其进行读取、写入或追加操作 open(file,mode,encoding)函数的格式:file:文件路径 mode:打开方式(读: r写&…...
CTF-Web习题:2019强网杯 UPLOAD
题目链接:2019强网杯 UPLOAD 解题思路 打开靶场如下图所示,是一个注册和登录界面 那就注册登录一下,发现是一个提交头像的页面: 试了一下只有能正确显示的png图片才能提交成功,同时F12拿到cookie,base6…...
Unity环境渲染与反射探针的深入探索
目录 环境渲染基础 光源设置 材质与光照贴图 反射探针(Reflection Probes)详解 反射探针的创建与配置 材质中的反射探针设置 实践案例 实践案例:室内场景中的反射效果 场景设置 反射探针配置 Unity代码示例(非直接配置…...
vue3 父组件 props 异步传值,子组件接收不到或接收错误
1. 使用场景 我们在子组件中通常需要调用父组件的数据,此时需要使用 vue3 的 props 进行父子组件通信传值。 2. 问题描述 那么此时问题来了,在使用 props 进行父子组件通信时,因为数据传递是异步的,导致子组件无法成功获取数据…...
[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 改…...
Uniswap价格批量查询与ws订阅行情
Uniswap价格批量查询与ws订阅行情 由于 Uniswap V1 版本必须包含 ETH 所以两个 token 之间交换必须先换成 ETH 去中转效率很低已经弃用了 由于 V3 版本 CLMM 和 V4 版本的 DLMM 数学模型过于复杂,还是先从 AMM 模型的 V2 进行入门和学习 Uniswap 三种合约 Unisw…...
vue 实战 区域内小组件元素拖拽 示例
<template><div><el-button type"primary" click"showDialog true">快捷布局</el-button><el-dialog title"快捷布局配置" :visible.sync"showDialog"><el-row :gutter"20"><el-co…...
C++多线程编程中的锁详解
在现代软件开发中,多线程编程是提升应用程序性能和响应能力的重要手段。然而,多线程编程也带来了数据竞争和死锁等复杂问题。为了确保线程间的同步和共享数据的一致性,C标准库提供了多种锁机制。 1. std::mutex std::mutex是最基础的互斥锁…...
van-dialog 组件调用报错
报错截图 报错原因 这个警告表明 vue 在渲染页面时遇到了一个未知的自定义组件 <van-dialog>,并且提示可能是由于未正确注册该组件导致的。在 vue 中,当我们使用自定义组件时,需要先在 vue 实例中注册这些组件,以便 vue 能…...
【Django】在vscode中运行调试Django项目(命令及图形方式)
文章目录 命令方式图形方式默认8000端口设置自定义端口 命令方式 python manage.py runserver图形方式 默认8000端口 设置自定义端口...
麦田物语第十三天
系列文章目录 麦田物语第十三天 文章目录 系列文章目录一、实现根据物品详情显示 ItemTooltip1.ItemTooltips脚本编写二、制作 Player 的动画一、实现根据物品详情显示 ItemTooltip 1.ItemTooltips脚本编写 首先创建Scripts->Inventory->UI->ItemTooltip脚本,然后…...
【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到远程仓库…...
Lua 复数计算器
Lua复数计算器 主要包括复数的加减乘除操作,以及打印 编写复数类 -- ***** 元类 ***** 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…...
深入MySQL中的IF和IFNULL函数
在数据库查询中,我们经常需要根据条件来决定数据的显示方式。MySQL提供了多种内置函数来帮助我们实现这种条件逻辑,其中IF和IFNULL是两个非常有用的函数。在这篇博客中,我们将深入探讨这两个函数的用法和它们在实际查询中的应用。 IF函数 I…...
AI多模态实战教程:面壁智能MiniCPM-V多模态大模型问答交互、llama.cpp模型量化和推理
一、项目简介 MiniCPM-V 系列是专为视觉-语⾔理解设计的多模态⼤型语⾔模型(MLLMs),提供⾼质量的⽂本输出,已发布4个版本。 1.1 主要模型及特性 (1)MiniCPM-Llama3-V 2.5: 参数规模: 8B性能…...
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...
mysql中提供的函数
文章目录 1.聚合函数2.字符串函数3.数值函数4.日期函数5.流程函数 MySQL 是一个功能强大的关系型数据库管理系统,其中包含了丰富的内置函数,用于处理各种数据操作和查询。这些函数可以分为多种类型,包括字符串函数、数值函数、日期和时间函数…...
7.4.分块查找
一.分块查找的算法思想: 1.实例: 以上述图片的顺序表为例, 该顺序表的数据元素从整体来看是乱序的,但如果把这些数据元素分成一块一块的小区间, 第一个区间[0,1]索引上的数据元素都是小于等于10的, 第二…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外,K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案,全安装在K8S群集中。 具体可参…...
<6>-MySQL表的增删查改
目录 一,create(创建表) 二,retrieve(查询表) 1,select列 2,where条件 三,update(更新表) 四,delete(删除表…...
椭圆曲线密码学(ECC)
一、ECC算法概述 椭圆曲线密码学(Elliptic Curve Cryptography)是基于椭圆曲线数学理论的公钥密码系统,由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA,ECC在相同安全强度下密钥更短(256位ECC ≈ 3072位RSA…...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了:一行…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...
AI书签管理工具开发全记录(十九):嵌入资源处理
1.前言 📝 在上一篇文章中,我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源,方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包,彻底改变了静态资源管理的…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...
招商蛇口 | 执笔CID,启幕低密生活新境
作为中国城市生长的力量,招商蛇口以“美好生活承载者”为使命,深耕全球111座城市,以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子,招商蛇口始终与城市发展同频共振,以建筑诠释对土地与生活的…...
Java数值运算常见陷阱与规避方法
整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...
