uniapp基于阿里图标库引入彩色的图标iconfont

news2024/11/26 16:28:37

1.进入阿里巴巴矢量图标库链接: https://www.iconfont.cn/,添加图标到项目,然后下载至本地
在这里插入图片描述
2.对下载的文件进行解压,命令行进入解压后的文件下,执行一下命令,全局安装iconfont-tools工具

npm install -g iconfont-tools

3.当我们全局下载完工具以后,点开文件夹,在文件夹的导航栏cmd,再执行如下的代码,然后回车
在这里插入图片描述
打开之后,执行如下代码

iconfont-tools 

4.然后接下来一直回车即可
在这里插入图片描述
5.最后一步就是将我们在文件夹下产生的新的文件夹下使用iconfont.css的文件
在这里插入图片描述
在这里插入图片描述
6.然后在APP.vue的文件下引入你的文件名称

<style>
/* 彩色的图标*/
@import url("~@/static/icon/iconfont-weapp-icon.css");
</style>

7.使用:其中xk857-icon开头是必须的,彩色图标当前对 vue文件有效,控制台会关于backgroud的相关警告,可忽略它

<text class="xk857-icon icon-sheji-xianxing"></text>

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

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

相关文章

SqlSerer数据库【进阶】

六、约束 &#xff08;1&#xff09;主键约束 1.单一主键 格式: alter table 表名 add constraint 主键名 primary key (列名) go例子: alter table t_student add constraint pk_t_student primary key (stud_id) go注意:在建表的时候主键不能为空 2.复合主键 复合主键…

基于小波哈尔法(WHM)的一维非线性IVP测试问题的求解(Matlab代码实现)

&#x1f4a5;1 概述 小波哈尔法&#xff08;WHM&#xff09;是一种求解一维非线性初值问题&#xff08;IVP&#xff09;的数值方法。它基于小波分析的思想&#xff0c;通过将原始问题转化为小波空间中的线性问题&#xff0c;然后进行求解。以下是一维非线性IVP测试问题的求解…

2023年郑州/杭州/深圳CSPM-3中级国标项目管理认证招生

CSPM-3中级项目管理专业人员认证&#xff0c;是中国标准化协会&#xff08;全国项目管理标准化技术委员会秘书处&#xff09;&#xff0c;面向社会开展项目管理专业人员能力的等级证书。旨在构建多层次从业人员培养培训体系&#xff0c;建立健全人才职业能力评价和激励机制的要…

基于时空RBF神经网络的混沌时间序列预测(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

TCP的三次握手过程

TCP 是面向连接的协议&#xff0c;所以使用 TCP 前必须先建立连接&#xff0c;而建立连接是通过三次握手来进行的。三次握手的过程如下图&#xff1a; 刚开始客户端处于 closed 的状态&#xff0c;服务端处于 listen 状态。 第一次握手&#xff1a;客户端给服务端发一个 SYN 报…

python_day10_复写,类型注解

复写&#xff1a;重写父类属性 class Phone:IMEI Noneproducer "XM"def call_by_5g(self):print("5g网络")# 复写 class myPhone(Phone):producer "HUAWEI"def call_by_5g(self):print("复写")# 调用父类成员:方式1# print(f"…

Notepad++ 安装 compare 插件比较文本

1、打卡Notepad软件&#xff0c;找到插件选项&#xff0c;若是英文版的&#xff0c;则对应选择Plugins->Plugins admin&#xff1a; 2、搜索compare插件&#xff0c;点击安装&#xff1a; 3、此时会弹出一个下载插件页面&#xff1a; 4、很可惜&#xff0c;我网络原因&#…

[游戏开发][Unity] TPS射击游戏相机实现

技术难点&#xff1a;由于是第三人称射击游戏&#xff0c;角色和相机之间有夹角&#xff0c;所以枪口点和准星是有误差的&#xff0c;下面是和平精英手游截图&#xff0c;我用AK射击zhuzi using System.Collections; using System.Collections.Generic; using UnityEngine;publ…

MyBatis 系列2 -- 增加、删除、修改操作

1. 前言 上一系列介绍了MyBatis的背景,以及为什么我们使用MyBatis进行操作数据库,还实现了使用MyBatis进行查询数据库的,接下来我们继续将使用MyBatis操作数据库的其他三种基本操作进行总结. 目录 1. 前言 2. 增加用户操作 3. 修改用户操作 4. 删除用户操作 5. 多表查询操…

unity背景缓动动效

这算是一个很常见的小功能&#xff0c;比如我们在玩横版游戏的时候&#xff0c;背景动画会以一定的频率运动&#xff0c;其实现方式也有很多种。 比如&#xff0c;使用UGUI的imageanimtion动画的方式&#xff0c;自己k桢实现。 还可以使用材质球本身的功能来实现&#xff0c;关…

datatables.editor 2.2 for PHP/JS/NodeJS Crack

使用数据表编辑器在几分钟内创建自定义、完全可编辑的表 编辑器添加了三种编辑模式&#xff0c;以适应任何类型的应用程序 新增功能 编辑 删除 搜索&#xff1a; 名字位置办公室开始日期工资名字位置办公室开始日期工资佐藤爱里会计东京2008-11-28$162&#xff0c;700安吉莉卡拉…

linux服务器中安装java JDK1.8版本

我们远程连接自己的linux服务器 然后 我们先执行 sudo yum update更新一下软件包 然后 有个需要选择的地方 按y 然后 我们可以直接用 yum 来安装Java 1.8版本 执行 sudo yum install java-1.8.0-openjdk然后 问你是否选择按 y即可 搞完之后 我们检查一下 输入 java -vers…

Elasticsearch:什么是矢量搜索以及它如何改进搜索结果

释放矢量搜索的力量&#xff1a;提高搜索结果效率 想象一下这样一个世界&#xff1a;搜索引擎不仅能理解你输入的单词&#xff0c;还能理解它们背后的上下文和含义。 这就是矢量搜索发挥作用的地方&#xff0c;它彻底改变了我们查找信息的方式并改善了用户的搜索体验。 在本文…

Erdas专题图制作

1.导入需要做图的数据 2.在新建一个地图view 3.绘制图框 出现以下对话框&#xff0c;在已打开的Viewer中图象上任意位置点一下 框选需要绘制的区域 框选完成后&#xff0c;回到窗口&#xff0c;再次确定输出地图所包含的实际区域&#xff0c;点击ok即可完成框选 得到如下图像框…

【Python】数据可视化利器PyCharts在测试工作中的应用

点击跳转原文&#xff1a;【Python】数据可视化利器PyCharts在测试工作中的应用 实际应用&#xff1a;常态化性能压测数据统计 import random from pyecharts.charts import Line, Bar, Grid, Pie, Page from pyecharts import options as opts # 查询过去 8 次数据 time_rang…

序列模型学习

1、序列模型的应用场景&#xff08;RNN&#xff09; &#xff08;1&#xff09;、在进行语音识别时&#xff0c;给定了一个输入音频片段 &#x1d465;&#xff0c;并要求输出对应的文字记录 &#x1d466;。这个 例子里输入和输出数据都是序列模型&#xff0c;因为 &#x1…

动态规划——买卖股票的最佳时机含手续费

题目链接 leetcode在线oj题——买卖股票的最佳时机含手续费 题目描述 给定一个整数数组 prices&#xff0c;其中 prices[i]表示第 i 天的股票价格 &#xff1b;整数 fee 代表了交易股票的手续费用。 你可以无限次地完成交易&#xff0c;但是你每笔交易都需要付手续费。如果…

美的代工厂雪祺电气过会:拟募资6亿元,产能利用率下滑仍要扩产

撰稿|行星 来源|贝多财经 近日&#xff0c;深圳证券交易所主板披露的信息显示&#xff0c;合肥雪祺电气股份有限公司&#xff08;以下简称“雪祺电气”&#xff09;获得上市委会议通过。据贝多财经了解&#xff0c;雪祺电气的上市申请材料于2023年2月28日获得受理。 天眼查信…

Ceph 块存储系统 RBD 接口

-创建 Ceph 块存储系统 RBD 接口- 1、创建一个名为 rbd-demo 的专门用于 RBD 的存储池 ceph osd pool create rbd-demo 64 642、将存储池转换为 RBD 模式 ceph osd pool application enable rbd-demo rbd3、初始化存储池 rbd pool init -p rbd-demo # -p 等同于 --pool4、…

前端多行文本省略号

.title {height: 4rem;line-height: 2rem;// 多行文本省略号overflow: hidden;font-size: 1.4rem;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}