如何UNI-APP中使用iconfont彩色图标

问题:UNI-APP可以支持用户自定义引入iconfont标签库,但是加载引入页面的标签均为黑白颜色,下载的彩色图标默认变为黑白颜色

解决方案:

1.首先,从iconfont官网(iconfont-阿里巴巴矢量图标库)选择自己需要的图标加入项目中,点击下载至本地。

如何UNI-APP中使用iconfont彩色图标_第1张图片

 2.在本地找到下载的压缩包,并解压,进入解压缩之后的文件,在地址栏中输入cmd打卡控制台(在文件夹内输入cmd可直接将路径定位到当前文件夹) 

如何UNI-APP中使用iconfont彩色图标_第2张图片

3.在控制台中输入指令:npm install -g iconfont-tools(此操作前置条件需要用户安装node.js),按回车执行指令,运行完毕后效果如下

如何UNI-APP中使用iconfont彩色图标_第3张图片

4.在控制台中输入指令:iconfont-tools,按回车执行指令,之后会以此出现下图中1-5的内容,可根据自己的需求填写相关设置,如果不填写内容,则会按照默认的信息设置,如下图所示如何UNI-APP中使用iconfont彩色图标_第4张图片5.在完成上述操作后,可以发现在文件夹中多出了一个iconfont-weapp的文件夹(名字为上图编号1中用户设置的名字,此为默认名),进入此文件夹

如何UNI-APP中使用iconfont彩色图标_第5张图片

 6.进入后,会看到一个iconfont-weapp-icon.css的文件

如何UNI-APP中使用iconfont彩色图标_第6张图片

 7.将文件放入项目中(位置随意)

如何UNI-APP中使用iconfont彩色图标_第7张图片

8.打开此文件,可以看到.t-icon开头的样式,这些样式就是可以引用的彩色样式(就是在原有的icon图标名称前加了“t-”后缀)

如何UNI-APP中使用iconfont彩色图标_第8张图片

9.在App.vue文件夹中,引入此样式表(注意路径不要写错)

如何UNI-APP中使用iconfont彩色图标_第9张图片

10.在页面中调用样式即可,注意,在class样式中要加入t-icon样式,还要加入具体要调用的样式(如t-icon-zonghechaxun)


                    
                    
  • 为Layui Table组件添加前端搜索功能 caifox菜狐狸 JavaScript学习之旅:从新手到专家前端layuijavascripttable前端搜索表格搜索前端框架
    在现代Web开发中,数据展示和交互功能是构建高效、用户友好界面的关键要素之一。Layui作为一款广受欢迎的前端UI框架,以其简洁的代码、丰富的组件和强大的功能,为开发者提供了极大的便利。其中,Layui的Table组件更是以其强大的数据展示能力和灵活的配置选项,成为了许多项目中不可或缺的部分。然而,在实际应用中,仅仅展示数据往往是不够的。用户通常需要根据自己的需求快速查找特定信息,这就需要为表格添
  • Python学习笔记5|条件语句和循环语句 iamecho9 Python从0到1学习笔记python学习笔记
    一、条件语句条件语句用于根据不同的条件执行不同的代码块。1、if语句基本语法:if布尔型语句1:代码块#语句1为True时执行的代码示例:age=int(input("请输入你的年龄:"))ifage>=18:print("你已成年")2、if-else语句如果if条件不成立,则执行else代码块:if布尔型语句1:代码块#语句1为True时执行的代码else:代码块#语句1为False时执行的代
  • Vue.js 过渡 & 动画 lsx202406 开发语言
    Vue.js过渡&动画引言在Web开发中,过渡与动画是提升用户体验的关键元素。Vue.js作为一款流行的前端框架,提供了强大的过渡与动画功能,使得开发者能够轻松实现丰富的交互效果。本文将深入探讨Vue.js中的过渡与动画,包括其原理、应用场景以及实现方法。一、Vue.js过渡原理Vue.js过渡是利用CSS3的transition属性实现的。当Vue.js侦测到数据变化时,会自动触发过渡效果。过渡
  • GPT实操——利用GPT创建一个应用 狗木马 深度学习gpt-3gpt
    功能描述信息查询:用户可以询问各种问题,如天气、新闻、股票等,机器人会返回相关信息。任务执行:用户可以要求机器人执行一些简单的任务,如设置提醒、发送邮件等。情感支持:机器人可以与用户进行情感交流,提供安慰和支持。个性化设置:用户可以自定义机器人的回复风格和偏好。技术栈前端:React.js后端:Node.js+Express数据库:MongoDB自然语言处理:OpenAIGPT-3API其他工具:
  • 5G标准学习笔记14 - CSI--RS概述 刘孬孬沉迷学习 5G学习笔记信息与通信
    5G标准学习笔记14-CSI–RS概述大家好~,这里是刘孬孬,今天带着大家一起学习一下5GNR中一个非常非常重要的参考信号------------------CSI-RS信号,CSI-RS不是持续发送,UE只能在网络明确配置了CSI-RS的情况下才能使用其进行信道测量。前言对于CSI-RS,肯定还离不开前面所说的CSI(channelstateinformation),前面也讲过CSI对于MIMO
  • 5G标准学习笔记06-基于AI/ML波束管理 刘孬孬沉迷学习 5G学习笔记
    5G标准学习笔记06-基于AI/ML波束管理前言前面对于孬孬学习了波束管理的概述,下面要进一步来看一下传统波束管理和现在3GPP中推动的AL/ML波束管理之前的区别联系。一、传统波束管理方法流程传统BM流程主要包括以下步骤:波束扫描(BeamSweeping):gNB通过顺序发送多个窄波束(SSB或CSI-RS),覆盖整个服务区域,UE测量每个波束的信号质量(如L1-RSRP或L1-SINR)。波
  • 5G标准学习笔记03- CSI 反馈增强概述 刘孬孬沉迷学习 5G笔记学习
    5G标准学习笔记03-CSI反馈增强概述大家好,最近在研究AI/ML3gpp标准NR空口的有关内容,后面可能会给大家介绍一下对应的有关内容AI/ML在3GPP标准中的研究进展在AI/ML在NR空口的应用中,对应标准主要聚焦了3个case进行讨论研究分别是:CSI反馈增强;波束管理;定位精度增强;这三个内容可能比较涉及RAN1/2的具体内容,后面会基于这个进行一定的介绍。今天主要是主要介绍CSI反馈
  • 前端面试题总结——JS篇 又又呢 前端javascript开发语言
    一、说说JavaScript中的数据类型?存储上有什么差别?1、数据类型基本类型number:数值类型十进制:letintNum=55八进制(零开头):letnum1=070十六进制(0x开头):lethexNum1=0xANaN:特殊数值,意为“不是数值”string:字符串类型boolean:布尔值,true或falseundefined:表示未定义null:空值symbol:是原始值,且符号
  • 前端面试题——5.AjAX的缺点? 浅端 前端面试题前端面试题
    ①传统的web交互是:用户一个网页动作,就会发送一个http请求到服务器,服务器处理完该请求再返回一个完整的HTML页面,客户端再重新加载,这样极大地浪费了带宽。②AJAX的出现解决了这个问题,它只会向服务器请求用户所需要的数据,并在客户端采用JavaScript处理返回的数据,操作DOM更新页面。③AJXA优点:无刷新更新页面异步服务器通信前端后端负载均衡④AJAX缺点:干掉了Back和Hist
  • 2023高薪前端面试题(二、前端核心——Ajax)
    原生AjaxAjax简介Ajax全程为AsynchronousJavaScript+XML,就是异步的JS和XML通过AJAX可以在浏览器中向服务器发送异步请求,最大的优势是:无刷新获取数据,实现局部刷新Ajax是一种用于创建快速动态网页的技术AJAX不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式Ajax的应用场景页面上拉加载更多数据列表数据无刷新分页表单项离开焦点数据验证搜索框提示
  • 前端面试题——手写实现 ajax 阿水爱踢中锋 ajaxjs前端
    凡是和后台有过数据交互的小伙伴肯定都接触过ajax.我们可以通过ajax来实现页面的无刷新请求数据,这样就能在保证良好用户体验的同时,将更多的内容展示给用户ajax在我们的开发工作中已经司空见惯,几乎所有我们频繁使用的库和框架都提供了经过完善封装后的ajax方法,如jQuery、zepto、angular等等,这使得我们的数据请求变得异常简洁明了但是这也带来了很明显的缺陷,就是我们知道如何去使用封
  • 学习笔记(33):matplotlib绘制简单图表-绘制混淆矩阵热图 宁儿数据安全 #机器学习学习笔记matplotlib
    学习笔记(33):matplotlib绘制简单图表-绘制混淆矩阵热图一、绘制混淆矩阵热图代码解析1.1、导入必要的库importmatplotlib.pyplotaspltfromsklearn.metricsimportconfusion_matriximportseabornassnsmatplotlib.pyplot:Python中最常用的绘图库,用于创建各种图表confusion_matr
  • uniapp 如何封装实现任意页面都能使用的全局弹窗 代码简单说 2025开发必备(限时特惠)uni-appvue.jsjavascriptuniapp全局弹窗uniapp弹窗组件
    【实战干货】uniapp如何封装实现任意页面都能使用的全局弹窗标签:uniapp弹窗组件全局弹窗Vue动态渲染跨页面弹窗✨前端老司机亲授,uniapp无法在所有页面中直接用自定义弹窗?别急,一招动态挂载vue实例,优雅解决!背景故事:一个被“弹窗”搞崩溃的早晨作为一名前端开发工程师,有一天我在给uniapp项目加IM消息功能,需求是:不论当前用户在哪个页面,只要有消息来,就要立即弹出提示窗口。听起
  • 【前端】接口日志追踪 毕业茄 前端
    1.问题描述场景:前端提交数据后,接口回调再次添加参数,但页面跳转/刷新导致之前的console.log数据丢失。影响:无法追踪完整的请求流程,调试困难。2.环境信息项目说明浏览器GoogleChrome120+开发者工具ChromeDevTools技术栈前端:Vue/React/其他接口类型RESTfulAPI/GraphQL3.解决方案3.1保留控制台日志(推荐)步骤:打开Chrome开发者工
  • 【前端】异步任务风控验证与轮询机制技术方案(通用笔记版)
    一、背景场景在某类生成任务中,例如用户点击“执行任务”按钮后触发一个较耗时的后端操作(如生成报告、渲染图像、转码视频等),由于其调用了模型、渲染服务或需要较长处理时间,为了防止接口被频繁恶意调用,系统需要加入风控验证机制。此外,因任务处理为异步,前端无法立即获得最终结果,因此需通过轮询方式定期查询任务状态,等待任务完成后展示结果。二、整体流程说明1.用户点击“执行任务”按钮:前端调用风控接口/ap
  • JAVA基础 灵静志远 位运算加载Date字符串池覆盖
    一、类的初始化顺序 1 (静态变量,静态代码块)-->(变量,初始化块)--> 构造器 同一括号里的,根据它们在程序中的顺序来决定。上面所述是同一类中。如果是继承的情况,那就在父类到子类交替初始化。 二、String 1 String a = "abc"; JAVA虚拟机首先在字符串池中查找是否已经存在了值为"abc"的对象,根
  • keepalived实现redis主从高可用 bylijinnan redis
    方案说明 两台机器(称为A和B),以统一的VIP对外提供服务 1.正常情况下,A和B都启动,B会把A的数据同步过来(B is slave of A) 2.当A挂了后,VIP漂移到B;B的keepalived 通知redis 执行:slaveof no one,由B提供服务 3.当A起来后,VIP不切换,仍在B上面;而A的keepalived 通知redis 执行slaveof B,开始
  • java文件操作大全 0624chenhong java
    最近在博客园看到一篇比较全面的文件操作文章,转过来留着。 http://www.cnblogs.com/zhuocheng/archive/2011/12/12/2285290.html 转自http://blog.sina.com.cn/s/blog_4a9f789a0100ik3p.html 一.获得控制台用户输入的信息    &nbs
  • android学习任务 不懂事的小屁孩 工作
    任务 完成情况 搞清楚带箭头的pupupwindows和不带的使用 已完成 熟练使用pupupwindows和alertdialog,并搞清楚两者的区别 已完成 熟练使用android的线程handler,并敲示例代码 进行中 了解游戏2048的流程,并完成其代码工作 进行中-差几个actionbar 研究一下android的动画效果,写一个实例 已完成 复习fragem
  • zoom.js 换个号韩国红果果 oom
    它的基于bootstrap 的 https://raw.github.com/twbs/bootstrap/master/js/transition.js  transition.js模块引用顺序 <link rel="stylesheet" href="style/zoom.css"> <script src=&q
  • 详解Oracle云操作系统Solaris 11.2 蓝儿唯美 Solaris
    当Oracle发布Solaris 11时,它将自己的操作系统称为第一个面向云的操作系统。Oracle在发布Solaris 11.2时继续它以云为中心的基调。但是,这些说法没有告诉我们为什么Solaris是配得上云的。幸好,我们不需要等太久。Solaris11.2有4个重要的技术可以在一个有效的云实现中发挥重要作用:OpenStack、内核域、统一存档(UA)和弹性虚拟交换(EVS)。 
  • spring学习——springmvc(一) a-john springMVC
    Spring MVC基于模型-视图-控制器(Model-View-Controller,MVC)实现,能够帮助我们构建像Spring框架那样灵活和松耦合的Web应用程序。   1,跟踪Spring MVC的请求 请求的第一站是Spring的DispatcherServlet。与大多数基于Java的Web框架一样,Spring MVC所有的请求都会通过一个前端控制器Servlet。前
  • hdu4342 History repeat itself-------多校联合五 aijuans 数论
    水题就不多说什么了。 #include<iostream>#include<cstdlib>#include<stdio.h>#define ll __int64using namespace std;int main(){ int t; ll n; scanf("%d",&t); while(t--)
  • EJB和javabean的区别 asia007 beanejb
    EJB不是一般的JavaBean,EJB是企业级JavaBean,EJB一共分为3种,实体Bean,消息Bean,会话Bean,书写EJB是需要遵循一定的规范的,具体规范你可以参考相关的资料.另外,要运行EJB,你需要相应的EJB容器,比如Weblogic,Jboss等,而JavaBean不需要,只需要安装Tomcat就可以了   1.EJB用于服务端应用开发, 而JavaBeans
  • Struts的action和Result总结 百合不是茶 strutsAction配置Result配置
        一:Action的配置详解:      下面是一个Struts中一个空的Struts.xml的配置文件     <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC &quo
  • 如何带好自已的团队 bijian1013 项目管理团队管理团队
    在网上看到博客" 怎么才能让团队成员好好干活"的评论,觉得写的比较好。 原文如下: 我做团队管理有几年了吧,我和你分享一下我认为带好团队的几点: 1.诚信         对团队内成员,无论是技术研究、交流、问题探讨,要尽可能的保持一种诚信的态度,用心去做好,你的团队会感觉得到。 2.努力提
  • Java代码混淆工具 sunjing ProGuard
    Open Source Obfuscators ProGuard http://java-source.net/open-source/obfuscators/proguardProGuard is a free Java class file shrinker and obfuscator. It can detect and remove unused classes, fields, m
  • 【Redis三】基于Redis sentinel的自动failover主从复制 bit1129 redis
    在第二篇中使用2.8.17搭建了主从复制,但是它存在Master单点问题,为了解决这个问题,Redis从2.6开始引入sentinel,用于监控和管理Redis的主从复制环境,进行自动failover,即Master挂了后,sentinel自动从从服务器选出一个Master使主从复制集群仍然可以工作,如果Master醒来再次加入集群,只能以从服务器的形式工作。   什么是Sentine
  • 使用代理实现Hibernate Dao层自动事务 白糖_ DAOspringAOP框架Hibernate
    都说spring利用AOP实现自动事务处理机制非常好,但在只有hibernate这个框架情况下,我们开启session、管理事务就往往很麻烦。 public void save(Object obj){ Session session = this.getSession(); Transaction tran = session.beginTransaction(); try
  • maven3实战读书笔记 braveCS maven3
    Maven简介 是什么? Is a software project management and comprehension tool.项目管理工具 是基于POM概念(工程对象模型) [设计重复、编码重复、文档重复、构建重复,maven最大化消除了构建的重复] [与XP:简单、交流与反馈;测试驱动开发、十分钟构建、持续集成、富有信息的工作区]     功能:
  • 编程之美-子数组的最大乘积 bylijinnan 编程之美
    public class MaxProduct { /** * 编程之美 子数组的最大乘积 * 题目: 给定一个长度为N的整数数组,只允许使用乘法,不能用除法,计算任意N-1个数的组合中乘积中最大的一组,并写出算法的时间复杂度。 * 以下程序对应书上两种方法,求得“乘积中最大的一组”的乘积——都是有溢出的可能的。 * 但按题目的意思,是要求得这个子数组,而不
  • 读书笔记-2 chengxuyuancsdn 读书笔记
    1、反射 2、oracle年-月-日 时-分-秒 3、oracle创建有参、无参函数 4、oracle行转列 5、Struts2拦截器 6、Filter过滤器(web.xml) 1、反射 (1)检查类的结构 在java.lang.reflect包里有3个类Field,Method,Constructor分别用于描述类的域、方法和构造器。 2、oracle年月日时分秒 s
  • [求学与房地产]慎重选择IT培训学校 comsci it
          关于培训学校的教学和教师的问题,我们就不讨论了,我主要关心的是这个问题       培训学校的教学楼和宿舍的环境和稳定性问题       我们大家都知道,房子是一个比较昂贵的东西,特别是那种能够当教室的房子... &nb
  • RMAN配置中通道(CHANNEL)相关参数 PARALLELISM 、FILESPERSET的关系 daizj oraclermanfilespersetPARALLELISM
    RMAN配置中通道(CHANNEL)相关参数 PARALLELISM 、FILESPERSET的关系 转 PARALLELISM --- 我们还可以通过parallelism参数来指定同时"自动"创建多少个通道: RMAN > configure device type disk parallelism 3 ; 表示启动三个通道,可以加快备份恢复的速度。
  • 简单排序:冒泡排序 dieslrae 冒泡排序
    public void bubbleSort(int[] array){ for(int i=1;i<array.length;i++){ for(int k=0;k<array.length-i;k++){ if(array[k] > array[k+1]){
  • 初二上学期难记单词三 dcj3sjt126com sciet
    concert 音乐会 tonight 今晚 famous 有名的;著名的 song 歌曲 thousand 千 accident 事故;灾难 careless 粗心的,大意的 break 折断;断裂;破碎 heart 心(脏) happen  偶尔发生,碰巧 tourist 旅游者;观光者 science (自然)科学 marry 结婚 subject 题目;
  • I.安装Memcahce 1. 安装依赖包libevent Memcache需要安装libevent,所以安装前可能需要执行 Shell代码 收藏代码 dcj3sjt126com redis
    wget http://download.redis.io/redis-stable.tar.gz tar xvzf redis-stable.tar.gz cd redis-stable make   前面3步应该没有问题,主要的问题是执行make的时候,出现了异常。 异常一: make[2]: cc: Command not found 异常原因:没有安装g
  • 并发容器 shuizhaosi888 并发容器
       通过并发容器来改善同步容器的性能,同步容器将所有对容器状态的访问都串行化,来实现线程安全,这种方式严重降低并发性,当多个线程访问时,吞吐量严重降低。    并发容器ConcurrentHashMap       替代同步基于散列的Map,通过Lock控制。   &nb
  • Spring Security(12)——Remember-Me功能 234390216 Spring SecurityRemember Me记住我
    Remember-Me功能   目录   1.1     概述 1.2     基于简单加密token的方法 1.3     基于持久化token的方法 1.4     Remember-Me相关接口和实现
  • 位运算 焦志广 位运算
    一、位运算符C语言提供了六种位运算符: & 按位与 | 按位或 ^ 按位异或 ~ 取反 << 左移 >> 右移 1. 按位与运算 按位与运算符"&"是双目运算符。其功能是参与运算的两数各对应的二进位相与。只有对应的两个二进位均为1时,结果位才为1 ,否则为0。参与运算的数以补码方式出现。 例如:9&am
  • nodejs 数据库连接 mongodb mysql liguangsong mongodbmysqlnode数据库连接
    1.mysql 连接    package.json中dependencies加入     "mysql":"~2.7.0"    执行 npm install      在config 下创建文件 database.js    
  • java动态编译 olive6615 javaHotSpotjvm动态编译
        在HotSpot虚拟机中,有两个技术是至关重要的,即动态编译(Dynamic compilation)和Profiling。     HotSpot是如何动态编译Javad的bytecode呢?Java bytecode是以解释方式被load到虚拟机的。HotSpot里有一个运行监视器,即Profile Monitor,专门监视
  • Storm0.9.5的集群部署配置优化 roadrunners 优化storm.yaml
    nimbus结点配置(storm.yaml)信息: # Licensed to the Apache Software Foundation (ASF) under one # or more contributor license agreements. See the NOTICE file # distributed with this work for additional inf
  • 101个MySQL 的调节和优化的提示 tomcat_oracle mysql
     1. 拥有足够的物理内存来把整个InnoDB文件加载到内存中——在内存中访问文件时的速度要比在硬盘中访问时快的多。   2. 不惜一切代价避免使用Swap交换分区 – 交换时是从硬盘读取的,它的速度很慢。   3. 使用电池供电的RAM(注:RAM即随机存储器)。   4. 使用高级的RAID(注:Redundant Arrays of Inexpensive Disks,即磁盘阵列
  • zoj 3829 Known Notation(贪心) 阿尔萨斯 ZOJ
    题目链接:zoj 3829 Known Notation 题目大意:给定一个不完整的后缀表达式,要求有2种不同操作,用尽量少的操作使得表达式完整。 解题思路:贪心,数字的个数要要保证比∗的个数多1,不够的话优先补在开头是最优的。然后遍历一遍字符串,碰到数字+1,碰到∗-1,保证数字的个数大于等1,如果不够减的话,可以和最后面的一个数字交换位置(用栈维护十分方便),因为添加和交换代价都是1