uni-app(使用阿里图标)

1.注册阿里矢量图标库

注册阿里图标库账号并登录,https://www.iconfont.cn/

2.加入购物车

搜索适合自己的图标,加入购物车,如下图:

图片

3.加入项目

我的->资源管理->我的项目->创建项目,然后返回购物车,把图标加入项目。

图片

图片

图片

4.下载至本地

进入我的项目,点击下载Font class。

图片

5.导入iconfont.css

复制"iconfont.css"文件到uni-app目根目录的static目录后(也可以为其他目录),打开"iconfont.css",删掉下图圈出的部分,记得把"src: url('data:application/x-font-woff2......"最后的逗号,改成分号;。

图片

6.引入iconfont.css

在项目根目录的"App.vue"中,引入上述的"iconfont.css",注意自己存放的路径,且通过"@import"引入的外部样式,为了兼容性建议使用相对路径, 且引入的样式,需要写在style标签有效内容中的最前面。

/* App.vue */
<style>
/* 此处为style标签内容的最前面 */
@import "./static/iconfont.css";/* 下面为错误示例,因为这里不是style标签内容的最前面,前面还有个".view"的样式 */
/* @import "./static/iconfont.css"; */
</style>

7.使用

<u-icon name="backspace" custom-prefix="custom-icon" size="30" color="#888888"></u-icon>

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

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

相关文章

Kafka集群安装与配置

Kafka 提醒&#xff1a;需要先安装zookeeper后才可以安装kafka 安装 官方下载地址&#xff1a;http://kafka.apache.org/downloads.html 解压安装包 tar -zxvf kafka_2.12-3.0.0.tgz -C /opt/module/修改解压后的文件名称 mv kafka_2.12-3.0.0/ kafka进入到/opt/module/k…

深度学习论文阅读之【Distilling the Knowledge in a Neural Network】提炼神经网络中的知识

论文&#xff1a;link 代码&#xff1a;link 摘要 提高几乎所有机器学习算法性能的一个非常简单的方法是在相同的数据上训练许多不同的模型&#xff0c;然后对它们的预测进行平均[3]。不幸的是&#xff0c;使用整个模型集合进行预测非常麻烦&#xff0c;并且计算成本可能太高&…

HTML文本信息

标题 使用h1~h6标签定义标题。通常一个HTML网页只有一个主标题和副标题&#xff0c;主标题和副标题分别使用h1和h2表示。 <h1>主标题</h1> <h2>副标题</h2><p>正文</p>段落 p元素用来表示段落文本。通常用来显示大片的文字。每一个p元素…

中国信通院 X StarRocks金融用户社区正式成立

在国家战略的推动下&#xff0c;开源技术正逐渐成为金融行业创新发展的重要驱动力。2024 年 3 月 26 日&#xff0c;中国信息通信研究院 X StarRocks 金融用户社区&#xff08;以下简称“社区”&#xff09;正式成立&#xff0c;这一举措旨在深化国内金融领域的开源生态建设&am…

粗略总结AI大模型学习需要了解的要点

目录 一、概念简介 二、兴起原因 三、相关要点 四、不足之处 五、总结 一、概念简介 AI大模型学习是指利用大规模数据集和强大计算能力进行深度学习模型的训练。随着数据的爆炸式增长和计算资源的提升&#xff0c;AI大模型学习成为了现代人工智能研究的重要方向。 二、兴起…

单元测试11213123231313131231231231

使用技术 junit Mockito s[romg 示例代码&#xff1a; SpringBootTest(classes启动类.class) public class AbstractTes{ MockBean protected A a; } AutoConfigureMockMvc(printOnlyOnFailure false) public abstract class AbstractWebTes extends AbstractTes imple…

使用pytorch构建一个初级的无监督的GAN网络模型

在这个系列中将系统的构建GAN及其相关的一些变种模型&#xff0c;来了解GAN的基本原理。本片为此系列的第一篇&#xff0c;实现起来很简单&#xff0c;所以不要期待有很好的效果出来。 第一篇我们搭建一个无监督的可以生成数字 (0-9) 手写图像的 GAN&#xff0c;使用MINIST数据…

精准测试——BCEL字节码检测

精准测试是通过源代码变更分析&#xff0c;确定改动代码影响的范围&#xff0c;从而进行针对性测试&#xff0c;进一步提升测试效率。不仅如此&#xff0c;精准测试还可以将测试用例与程序代码之间的逻辑映射关系建立起来&#xff0c;采集测试过程执行的代码逻辑及测试数据。怎…

Android--重构

重构不是一朝一夕的事情&#xff0c;是一个持续的过程 要注重代码注释&#xff0c;对创建的每一个页面&#xff0c;类&#xff0c;方法&#xff0c;关键变量都要有对应的注释&#xff0c;对于类要写明作者是谁&#xff0c;创建修改时间&#xff0c;还有是做什么。 这样对后面的…

入门指南|营销中人工智能生成内容的主要类型 [新数据、示例和技巧]

由于人工智能技术的进步&#xff0c;内容生成不再是一项令人头疼的任务。随着人工智能越来越多地接管手动内容制作任务&#xff0c;营销人员明智的做法是了解现有的不同类型的人工智能生成内容&#xff0c;以及哪些内容从中受益最多。这些工具可以帮助我们制作对您的受众和品牌…

Synchronized锁、公平锁、悲观锁乐观锁、死锁等

悲观锁 认为自己在使用数据的时候一定会有别的线程来修改数据,所以在获取数据前会加锁,确保不会有别的线程来修改 如: Synchronized和Lock锁 适合写操作多的场景 乐观锁 适合读操作多的场景 总结: 线程8锁🔐 调用 声明 结果:先打印发送短信,后打印发送邮件 结论…

【WPF应用16】WPF如何让Canvas上的元素响应鼠标点击事件?

在WPF中&#xff0c;要让Canvas上的元素响应鼠标点击事件&#xff0c;你需要为这些元素添加事件处理程序来处理MouseLeftButtonDown事件。这个事件会在鼠标左键被按下时触发。下面是一篇详细的博客&#xff0c;展示了如何在Canvas上的元素上添加鼠标点击事件处理程序。 1. Can…

AI大模型学习和实践

目录 第一章:AI大模型概述 1.1 什么是AI大模型? 1.2 AI大模型的发展历程 1.3 AI大模型的应用领域 1.4 AI大模型的挑战与机遇 第二章:数学基础与模型理论 2.1 数学在AI大模型学习中的重要性 2.1.1 线性代数 2.2.2 微积分 2.2.3 概率论与统计学 2.2、模型理论的基础…

机器学习(三)

神经网络: 神经网络是由具有适应性的简单单元组成的广泛并行互连的网络&#xff0c;它的组织能够模拟生物神经系统对真实世界物体所作出的交互反应。 f为激活(响应)函数: 理想激活函数是阶跃函数&#xff0c;0表示抑制神经元而1表示激活神经元。 多层前馈网络结构: BP(误差逆…

OpenPLC_Editor 在Ubuntu 虚拟机安装记录

1. OpenPLC_Editor在虚拟机上费劲的装了一遍&#xff0c;有些东西已经忘了&#xff0c;主要还是python3 的缺失库版本对应问题&#xff0c;OpenPLC_Editor使用python3编译的&#xff0c;虚拟机的Ubuntu 18.4 有2.7和3.6两个版本&#xff0c;所以需要注意。 2. OpenPLC_Editor …

Svg Flow Editor 原生svg流程图编辑器(四)

系列文章 Svg Flow Editor 原生svg流程图编辑器&#xff08;一&#xff09; Svg Flow Editor 原生svg流程图编辑器&#xff08;二&#xff09; Svg Flow Editor 原生svg流程图编辑器&#xff08;三&#xff09; Svg Flow Editor 原生svg流程图编辑器&#xff08;四&#xf…

Mac命令行查找SDK/JDK安装位置

要在命令行中查询 Android SDK Platform Tools 的安装位置,可以使用以下步骤: 使用 which 命令: 在命令行中执行以下命令: which adb这将输出 adb 命令的安装路径,通常情况下,它会在 Android SDK 的 platform-tools 目录下。 手动查找: 如果 which adb 没有输出,可以手…

unity中判断方向 用 KeyVertical ,KeyHorizontal 判断ui物体的 方向

float KeyVertical Input.GetAxis("Vertical"); float KeyHorizontal Input.GetAxis("Horizontal"); // 假设 UI 物体在竖直方向上为 Y 轴&#xff0c;水平方向上为 X 轴 Vector2 direction new Vector2(KeyHorizontal, KeyVertical); if (direction…

贪心算法--最大数

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 本题链接https://leetcode.cn/problems/largest-number/description/ class Solution { public:bool static compare(int a, int b){return (to_string(a) to_string(b)) > (to_string(b) to_string(a));}bool operato…

幽默记忆TCP/UDP/DNS/三次握手

三次握手 把客户端和服务端比作两个小孩想象一下&#xff0c;你正在和朋友一起玩“猜拳”游戏&#xff0c;但是你们之间的通信线路不够稳定&#xff0c;为了确保游戏开始前大家都准备好了&#xff0c;你们进行了这样一段对话&#xff1a; 第一次握手&#xff1a;你对朋友说&am…