uni-app(使用阿里图标)

news/2024/4/29 3:15:21/文章来源:https://blog.csdn.net/qq_38997379/article/details/137101677

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.luyixian.cn/news_show_1028059.aspx

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

相关文章

cesium vue 绘制标记实体(撒点),监听鼠标左击事件

添加实体 const viewer new Cesium.Viewer(cesiumContainer, {})viewer.entities.add()查看实体 const viewer new Cesium.Viewer(cesiumContainer, {}) const billboard viewer.entities.add({...})viewer.zoomTo(billboard)删除实体 根据实体删除 if (billboard.value…

快速上手Spring Cloud 六:容器化与微服务化

快速上手Spring Cloud 一&#xff1a;Spring Cloud 简介 快速上手Spring Cloud 二&#xff1a;核心组件解析 快速上手Spring Cloud 三&#xff1a;API网关深入探索与实战应用 快速上手Spring Cloud 四&#xff1a;微服务治理与安全 快速上手Spring Cloud 五&#xff1a;Spring …

目标检测+车道线识别+追踪

一种方法&#xff1a; 车道线检测-canny边缘检测-霍夫变换 一、什么是霍夫变换 霍夫变换&#xff08;Hough Transform&#xff09;是一种在图像处理和计算机视觉中广泛使用的特征检测技术&#xff0c;主要用于识别图像中的几何形状&#xff0c;尤其是直线、圆和椭圆等常见形状…

C++从入门到精通——函数重载

函数重载 前言一、函数重载概念二、函数重载的分类参数类型不同的函数重载参数个数不同的函数重载参数类型顺序不同的函数重载 三、函数重载的具体代码展示main.cpp 四、为什么为什么C支持函数重载&#xff0c;而C语言不支持函数重载呢 前言 函数重载是指在同一个作用域内&…

argo rollout使用

一、前言 argorollout是比argocd更高级的发布工具&#xff0c;其中包含自动化金丝雀发布、自动化蓝绿发布、还可以通过argo命令或者dashboard查看发布的过程 二、使用 需要先部署argo rollout服务 参考&#xff1a;https://github.com/argoproj/argo-rollouts/tree/master/m…

微信小程序的页面制作---常用组件及其属性2

一、标签栏taBar 在全局配置文件app.json中添加taBar配置&#xff0c;可实现标签栏配置。标签栏最少2个&#xff0c;最多5个 &#xff08;1&#xff09;如何配置标签栏&#xff1f; 1》先建多个文件&#xff0c;&#xff08;以我的index&#xff0c;list&#xff0c;myform文…

RelayAttention:让大型语言模型更高效地处理长提示符

一、前言 虽然大型语言模型 (LLM) 近年来取得了非常显著的进展&#xff0c;也在各种自然语言处理任务中展现出强大的能力。然而&#xff0c;LLM 的在实际的应用落地层面也面临着一些实际挑战&#xff0c;其中之一就是效率和成本问题&#xff0c;导致了在垂直行业实际落地的应用…

CE-Net:用于2D医学图像分割的上下文编码器网络

CE-Net&#xff1a;用于2D医学图像分割的上下文编码器网络 摘要引言方法 【2019】CE-NetContext Encoder Network for 2D Medical Image Segmentation 摘要 医学图像分割是医学图像分析中的重要步骤。随着卷积神经网络在图像处理中的快速发展&#xff0c;深度学习已经被用于医…

服务器被攻击有什么表现?

引言 在现今高度互联的网络环境中&#xff0c;服务器安全已成为每个企业和个人站长不容忽视的重要议题。服务器作为承载关键业务和数据的核心设施&#xff0c;一旦遭受攻击&#xff0c;不仅可能导致服务中断、数据泄露&#xff0c;还可能带来严重的经济损失和声誉损害。本文旨…

【二叉树】Leetcode 98. 验证二叉搜索树【中等】

验证二叉搜索树 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左子树只包含 小于 当前节点的数。节点的右子树只包含 大于 当前节点的数。所有左子树和右子树自身必须也是二叉搜索树。 示例1&a…

fpga 通过axi master读写PS侧DDR的仿真和上板测试

FPGA和ARM数据交互是ZYNQ系统中非常重要的内容。PS提供了供FPGA读写的AXI-HP接口用于两者的高速通信和数据交互。一般的&#xff0c;我们会采用AXI DMA的方式去传输数据&#xff0c;DMA代码基本是是C编写&#xff0c;对于FPGA开发者来说不利于维护和debug。本文提供一种手写AXI…

6、鸿蒙学习-Stage模型应用程序包结构

基于Stage模型开发的应用&#xff0c;经编译打包后&#xff0c;其应用程序的结构如下图应用程序包结构&#xff08;Stage模型&#xff09;所示。开发者需要熟悉应用程序包结构相关的基本概念。 一、在开发态&#xff0c;一个应用包含一个或者多个Module&#xff0c;可以在DevE…

“免密支付”出事了?看看背后的安全隐患

#免密支付# 的安全问题近日冲上热搜&#xff0c;大家来看看怎么一回事。 “我不知道什么时候开通的‘免密支付’功能&#xff0c;直到手机频繁收到账单提醒&#xff0c;才发现平台账号被盗&#xff0c;对方通过‘免密支付’消费了5000多元。这种事关会员安全的操作提示应该设置…

机器学习概论—增强学习

机器学习概论—增强学习 强化学习(Reinforcement Learning, RL)或者说是增强学习,是机器学习的一个领域,旨在使智能体通过与环境的交互学习如何做出决策,它是关于在特定情况下采取适当的行动来最大化奖励。它被各种软件和机器用来寻找在特定情况下应采取的最佳行为或路径…

无忧微服务:如何实现大流量下新版本的发布自由

作者&#xff1a;项良、十眠 微服务上云门槛降低&#xff0c;用好微服务才是关键 据调研数据显示&#xff0c;约 70% 的生产故障是由变更引起的。在阿里云上的企业应用如茶百道、极氪汽车和来电等&#xff0c;他们是如何解决变更引起的稳定性风险&#xff0c;实现了在白天高流…

etf期权开户有哪些基本条件,期权的佣金最低多少?

在中国开设etf期权账户&#xff0c;投资者需要满足一系列的基本条件。首先&#xff0c;投资者的证券账户日均客户权益不得低于50万元人民币&#xff0c;且需有6个月以上的证券或期货交易经验。此外&#xff0c;投资者还必须通过相关的测试&#xff0c;并具备被认可的期权模拟交…

wpf程序调用macad的c++编写的dll

1.把macad里的build&#xff0c;source文件夹复制到一个文件夹里 2.创建一个wpf项目&#xff0c;在解决方案里添加macad.occt项目 3.把macad.occt设为dll文件&#xff0c;修改平台工具集&#xff0c;在macadtest里引用macad.occt 4.运行&#xff0c;应该会报错&#xff0c;说找…

深度学习每周学习总结P3(天气识别)

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 数据链接 提取码&#xff1a;o3ix 目录 0. 总结1. 数据导入部分数据导入部分代码详解&#xff1a;a. 数据读取部分a.1 提问&#xff1a;关…

30-3 越权漏洞 - 水平越权(横向越权)

环境准备:构建完善的安全渗透测试环境:推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客 一、定义 攻击者可以访问和操作与其拥有同级权限的用户资源。 示例: 学生A在教务系统上正常只能修改自己的作业内容,但由于不合理的权限校验规则等原因,学生A可以修改学生B的内…

【CDA二级数据分析备考思维导图】

CDA二级数据分析备考思维导图 CDA二级复习备考资料共计七个章节&#xff0c;如需资料&#xff0c;请留言&#xff0c;概览如下图&#xff1a;一、数据采集与处理1.数据采集方法2.市场调研和数据录入3、数据探索与可视化4、数据预处理方法 总结&#xff1a;以上为自己学习数据分…