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-prefixtype 属性自定义图标

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

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

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

相关文章

地球的2亿年轮回:彗星雨下的地质巨变与未来展望

在浩瀚的宇宙中&#xff0c;地球正悄然经历着一次巨大的轮回。你是否曾想过&#xff0c;地球为何拥有如此活跃的板块构造和与众不同的大陆&#xff1f;科学家们发现&#xff0c;每隔大约2亿年&#xff0c;地球便会遭遇一场彗星雨&#xff0c;这场彗星淋浴不仅改变了地球的面貌&…

【TAROT学习日记】韦特体系塔罗牌学习(8)——战车 THE CHARIOT VII

韦特体系塔罗牌学习&#xff08;8&#xff09;——战车 THE CHARIOT VII 目录 韦特体系塔罗牌学习&#xff08;8&#xff09;——战车 THE CHARIOT VII牌面分析1. 基础信息2. 图片元素 正位牌意1. 关键词/句2.爱情婚姻3. 学业事业4. 人际财富5. 其他象征意 逆位牌意1. 关键词/句…

Java使用定时任务开始-结束活动

有一种场景&#xff0c;比如抢购活动&#xff0c;活动的开始肯定不是到点后手动点击开始按钮的&#xff0c;而是通过配置活动开始时间和结束时间&#xff0c;然后开启定时任务&#xff0c;通过定时任务来控制活动的开始和结束。 1. 活动上架--触发定时任务的开启 Override Tr…

yolov5使用flask部署至前端,实现照片\视频识别

初学yolo flask时&#xff0c;需要此功能&#xff0c;Csdn、Github、B站找到许多代码&#xff0c;效果并不满意。 近期&#xff0c;再度尝试&#xff0c;实现简单功能。 实现功能&#xff1a; 上传图片并识别,可以点击图片放大查看 上传视频并识别 识别后的文件下载功能 …

Windows电脑如何启动RTSP服务实现本地摄像头数据共享

技术背景 提起Windows共享本地摄像头&#xff0c;好多人想到的是通过ffmepg或vlc串流到服务器&#xff0c;实际上&#xff0c;用轻量级RTSP服务更简单&#xff0c;本文就介绍下&#xff0c;如何用大牛直播SDK的Windows轻量级RTSP服务&#xff0c;采集摄像头&#xff0c;生成本…

人工智能历史:从梦想到现实的变革之路

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

Git 安装教程

1、登录git 官方网站&#xff1a;https://git-scm.com/ 点击左边的 Downloads 或者 右边标识的下载标志&#xff0c;它根据电脑操作系统自动匹配版本 Downloads for Windows 2、以 windows 为例下载对应版本 网络有时可能不大好&#xff0c;阿里镜像下载超快。 下载好以后&a…

Tensorflow中高维矩阵的乘法运算tf.matmul(tf.linalg.matmul)详悉

1.问题由来 在tensorflow框架下&#xff0c;经常会用到矩阵的乘法运算&#xff0c;特别是高&#xff08;多&#xff09;维的矩阵运算&#xff0c;在这些矩阵运算时&#xff0c;经常使用到其中的tf.matmul或tf.linalg.matmul等函数。但高维矩阵在内部怎么运算的&#xff1f;其内…

npm yarn pnpm的区别

‌npm, ‌yarn, 和 ‌pnpm 都是用于管理 ‌JavaScript 项目依赖的工具&#xff0c;但它们在设计理念、性能和功能上有显著的区别。 npm 是 Node.js 的官方包管理器&#xff0c;主要用于管理和分发 Node.js 的依赖。它支持语义版本控制&#xff0c;确保在不同环境中保持一致性&a…

【深度学习入门】安装conda/miniconda、所需包类、CUDA与conda/Miniconda间的关系

深度学习入门 须知 本教程跟随李沐老师课程随笔&#xff0c;课程链接点击此处。 CUDA和Anaconda的关系 CUDA Toolkit是由Nvidia官方提供的完整工具包&#xff0c;其中提供了Nvidia驱动程序、开发CUDA程序相关的开发工具包等。 Anaconda在安装Pytorch等会用到的CUDA的框架时…

【INTEL(ALTERA)】Quartus® Prime Pro Edition 软件 v24.2 中,哪些 Agilex™ 5 IP 功能的硬件验证有限?

目录 说明 解决方法 说明 如下表所示&#xff0c;Quartus Prime 专业版软件 24.2 版为 Agilex™ 5 IP 或功能提供有限的硬件支持。此外&#xff0c;设备的设备型号、比特流和固件尚未最终确定。 影响 Agilex™ 5 特定功能的已知问题可参阅 Agilex 5 知识库文章搜索。 解决…

【Air724UG】4G模块

目录 一、实物图 二、原理图 引脚定义 三、简介 基本原理 产品参数 UART1 蓝色指示灯 五、注意&#xff1a; 源文件下载 可访问底部联系方式也可前往电子校园网官网搜索关键词 关键词&#xff1a; Air724UG 一…

wpf中轮询显示图片

本文的需求是&#xff0c;在一个文件夹中&#xff0c;放一堆图片的集合&#xff0c;然后在wpf程序中&#xff0c;按照定时的方式&#xff0c;循序显示照片。 全部代码 1.声明一个PictureInfo类 namespace WpfApp1 {public class PictureInfo{public string? FileName { get; …

科技日报:华宇TAS应用中间件亮相2024政法智能化建设技术装备及成果展

近日&#xff0c;2024政法智能化建设技术装备及成果展在北京国家会议中心举行。成果展上&#xff0c;信创领域的华宇TAS应用中间件产品引人注目。 中间件是一种基础软件&#xff0c;在信息系统中处于应用运行支撑及连接的基础地位&#xff0c;是构建数字化转型基础设施的中坚力…

uni-app全局文件与常用API

文章目录 rpx响应式单位import导入css样式及scss变量用法与static目录import导入css样式uni.scss变量用法 pages.json页面路由globalStyle的属性pages设置页面路径及窗口表现tabBar设置底部菜单选项及iconfont图标 vite.config中安装插件unplugin-auto-import自动导入vue和unia…

探索Perl的奇妙世界:入门学习与实战指南

一、Perl语言概述 1.1 Perl的起源与发展 Perl&#xff08;Practical Extraction and Reporting Language&#xff09;是一种高级、解释型、动态编程语言&#xff0c;由Larry Wall于1987年发明。Perl的初衷是作为一种文本处理工具&#xff0c;帮助系统管理员在Unix系统中处理报…

Godot游戏制作 04平台设计

新建创景&#xff0c;添加AnimatableBody2D节点。 添加Sprite2D节点 拖动图片 剪裁图片&#xff0c;吸附模式&#xff1a;像素吸附 添加CollisionShape2D&#xff0c;设置实际形状为矩形 重命名AnimatableBody2D节点为Platform&#xff0c;保存场景&#xff0c;拖动platform场景…

STM32 | 看门狗IWDG喂狗实战

点击上方"蓝字"关注我们 01、实现功能 1、通过按键中断,让CPU执行往非法地址写入一个数据(往非法地址写入数据,系统会卡死) 非法地址:0xC0000000 02、看门狗头文件 #ifndef __IWDG_H#define __IWDG_H​#include "stm32f4xx.h"​​​void Iwdg_Init…

自动驾驶仿真前后端

自动驾驶仿真系统的开发涉及前端和后端两个主要方面&#xff0c;分别负责用户界面和仿真逻辑的实现。下面分别介绍自动驾驶仿真系统的前端和后端开发过程&#xff1a; ### 前端开发 前端开发主要关注用户界面的设计和交互&#xff0c;通常使用的技术包括图形用户界面&#xf…

数据库(MySQL)-视图、存储过程、触发器

一、视图 视图的定义、作用 视图是从一个或者几个基本表&#xff08;或视图&#xff09;导出的表。它与基本表不同&#xff0c;是一个虚表。但是视图只能用来查看表&#xff0c;不能做增删改查。 视图的作用&#xff1a;①简化查询 ②重写格式化数据 ③频繁访问数据库 ④过…