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>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringCloud学习笔记二:服务间调用

微服务中&#xff0c;很多服务系统都在独立的进程中运行&#xff0c;通过各个服务系统之间的协作来实现一个大项目的所有业务功能。服务系统间 使用多种跨进程的方式进行通信协作&#xff0c;而RESTful风格的网络请求是最为常见的交互方式之一。 spring cloud提供的方式&#…

工厂数字化看板是什么?部署工厂数字化看板有什么作用?

随着工业4.0时代的来临&#xff0c;数字化转型已成为制造业发展的必然趋势。在这个背景下&#xff0c;工厂数字化看板作为一种高效的信息展示与管理工具&#xff0c;正逐渐受到越来越多企业的青睐。那么&#xff0c;什么是工厂数字化看板&#xff1f;部署工厂数字化看板又有哪些…

真没想到,SQL注入漏洞的这么大,竟然导致1400万名俄罗斯大学毕业生信息泄露

不知道各位面试时&#xff0c;有没有相关的面试官有没有问到这样的问题&#xff0c;什么是sql注入&#xff0c;sql注入的危害是什么&#xff0c;mybatis的#与$的区别是什么等等&#xff0c;我想很多人都知道使用mybatis的#去规避sql注入&#xff0c;但是很多人不知道其原理&…

备份SQLserver数据库到本地位置

怎么选择合适的数据库备份方案&#xff1f; 有人可能会说SSMS&#xff0c;确实&#xff0c;SSMS作为一个微软官方提供的SQLserver数据库管理工具&#xff0c;是可以帮助我们完成对数据库的备份还原任务的&#xff0c;但是它也有一些局限性&#xff0c;比如不能进行批量化的备份…

LLM应用:Prompt flow vs LangChain

背景 Prompt flow和LangChain都是LLM时代&#xff0c;为高效地构建LLM应用而生。 Prompt flow是Microsoft开源的&#xff0c;其诞生时&#xff0c;LangChain已经很有名气了。 所以作为后生的Prompt flow会为我们带来哪些新的东西呢&#xff1f; ​​​​​​​ Prompt flo…

JTW——01,简述、对比

简述、对比 一、jwt跟token的区别二、什么是jwt三、jwt能做什么四、传统的session认证五、Jwt认证 一、jwt跟token的区别 https://blog.csdn.net/wangxinxinsj/article/details/132746876 二、什么是jwt 三、jwt能做什么 四、传统的session认证 五、Jwt认证

Docker搭建LNMP环境实战(06):Docker及Docker-compose常用命令

Docker搭建LNMP环境实战&#xff08;06&#xff09;&#xff1a;Docker及Docker-compose常用命令 此处列举了docker及docker-compose的常用命令&#xff0c;一方面可以做个了解&#xff0c;另一方面可以在需要的时候进行查阅。不一定要强行记忆&#xff0c;用多了就熟悉了。 1、…

ETL工具-nifi干货系列 第五讲 处理器GenerateFlowFile

1、今天我们一起来学习处理器GenerateFlowFile。这个处理器创建带有随机数据或自定义内容的 FlowFiles。GenerateFlowFile 对于负载测试、配置和模拟非常有用。从工具栏拖动处理器到画布&#xff0c;然后选择GenerateFlowFile即可。 2、点击add按钮或者双击 GenerateFlowFile可…

大型矿业集团安全知识竞赛主持词

男&#xff1a;尊敬的各位领导&#xff0c;员工同志们&#xff1a; 合&#xff1a;大家好&#xff01; 男&#xff1b;首先让我们以热烈的掌声对公司领导亲临比赛现场指导观看表示欢迎&#xff01; 男&#xff1b;继成功开展了荣辱观专题讲座、好矿嫂女红艺术展、安全谜语竞猜…

CCF-CSP认证考试 202212-3 JPEG 解码 100分题解

更多 CSP 认证考试题目题解可以前往&#xff1a;CSP-CCF 认证考试真题题解 原题链接&#xff1a; 202212-3 JPEG 解码 时间限制&#xff1a; 1.0s 内存限制&#xff1a; 512.0MB 问题背景 四年一度的世界杯即将画上尾声。在本次的世界杯比赛中&#xff0c;视频助理裁判&…

MySQL为什么会选错索引

在平时不知道一有没有遇到过这种情况&#xff0c;我明明创建了索引&#xff0c;但是MySQL为何不用索引呢&#xff1f;为何要进行全索引扫描呢&#xff1f; 一、对索引进行函数操作 假设现在维护了一个交易系统&#xff0c;其中交易记录表 tradelog 包含交易流水号(tradeid)、交…

计算机组成原理 — 指令系统

指令系统 指令系统指令的概述指令的格式指令的字长取决于 操作数类型和操作种类操作数的类型数据在存储器中的存放方式操作类型 寻址方式指令寻址数据寻址立即寻址直接寻址隐含寻址间接寻址寄存器寻址寄存器间接寻址基址寻址变址寻址堆栈寻址 RISC 和 CISC 技术RISC 即精简指令…

通过组策略统一开启终端系统的远程桌面,并修改远程桌面的端口号

通过组策略可以统一开启终端系统的远程桌面服务&#xff0c;但是修改远程桌面端口号则需要通过注册表或者其他方式实现&#xff0c;因为组策略本身不提供直接修改远程桌面端口的功能。以下是如何操作&#xff1a; 开启终端系统的远程桌面&#xff1a; 打开“组策略管理编辑器…

『Apisix系列』破局传统架构:探索新一代微服务体系下的API管理新范式与最佳实践

文章目录 『Apisix基石篇』『Apisix入门篇』『Apisix进阶篇』『Apisix安全篇』 『Apisix基石篇』 &#x1f680; 手把手教你从零部署APISIX高性能API网关 利用Docker-compose快速部署Apache APISIX及其依赖组件&#xff0c;实现高效的API网关搭建通过编写RPM安装脚本来自动化安…

cesium加载.tif格式文件

最近项目中有需要直接加载三方给的后缀名tif格式的文件 <script src"https://cdn.jsdelivr.net/npm/geotiff"></script> 或者 yarn add geotiff npm install geotiff 新建tifs.js import GeoTIFF, { fromBlob, fromUrl, fromArrayBuffer } from geotif…

反勒索组件的核心功能是什么

反勒索组件是一种重要的网络安全工具&#xff0c;旨在防止和应对勒索软件的攻击。勒索软件&#xff0c;通常被称为“勒索病毒”&#xff0c;是一种恶意软件&#xff0c;它会加密用户的文件并要求支付赎金以获取解密密钥。反勒索组件通过一系列的技术和策略&#xff0c;帮助用户…

操作教程|在MeterSphere中通过SSH登录服务器的两种方法

MeterSphere开源持续测试平台拥有非常强大的插件集成机制&#xff0c;用户可以通过插件实现平台能力的拓展&#xff0c;借助插件或脚本实现多种功能。在测试过程中&#xff0c;测试人员有时需要通过SSH协议登录至服务器&#xff0c;以获取某些配置文件和日志文件&#xff0c;或…

前端如何判断元素是否到达可视区域

以图片显示为例&#xff1a; window.innerHeight 是浏览器可视区的高度&#xff1b;document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离&#xff1b;imgs.offsetTop 是元素顶部距离文档顶部的高度&#xff08;包括滚动条的距离&#xff0…

Python 从0开始 一步步基于Django创建项目(13)将数据关联到用户

在city_infos应用程序中&#xff0c;每个城市信息条目是关联到城市的&#xff0c;所以只需要将城市条目关联到用户即可。 将数据关联到用户&#xff0c;就是把‘顶层’数据关联到用户。 设计思路&#xff1a; 1、修改顶层数据模型&#xff0c;向其中添加‘用户’属性 2、根…

泛微OA 主表字段更改 修改明细字段的必填或修改属性

1、申请类型&#xff1a;其它类&#xff0c;供应商、规格、金额必填。 2、申请类型&#xff1a;IT设备类&#xff0c;供应商、规格、金额可编辑。 <script>jQuery(document).ready(function(){//绑定主表字段变更事件WfForm.bindFieldChangeEvent("field6669",…