iconfont的使用(超简单)

iconfont的使用(超简单)

  • 1、iconfont 是什么?
  • 2、使用
    • 2.1、新建项目
    • 2.2、搜图标 添加 至项目中
    • 2.3、下载iconfont的包文件![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/91a0a07cd4b74798b7fb333dddca7724.png)
    • 2.4、画一个文件夹图标

1、iconfont 是什么?

阿里iconfont图标库

iconfont是阿里打造的矢量图标管理、交流平台,设计师将图标上传到 iconfont 平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。

  • iconfont中具有页面所需要的各种各样的图标库
  • 直接调用,就能使用各种各样的图标

2、使用

我们可以新建一个项目然后把要使用的图标都放到这个库中方便查看使用。

2.1、新建项目

在这里插入图片描述在这里插入图片描述

2.2、搜图标 添加 至项目中

项目创建后,我们搜索要使用的图标,然后加入到新创建的项目中
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

我们可以在项目中查看到所添加的图标

在这里插入图片描述

2.3、下载iconfont的包文件在这里插入图片描述

解压至文件夹iconfont中
在这里插入图片描述

2.4、画一个文件夹图标

symbol方式 画一个文件夹
在这里插入图片描述
代码


<script src="./iconfont/iconfont.js"></script>
<body><svg class="icon" aria-hidden="true"><use xlink:href="#icon-wenjianjia"></use></svg>
</body>

图标
在这里插入图片描述

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

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

相关文章

【Qt项目专栏】贪吃蛇小游戏1.0

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 贪吃蛇小游戏1.0 项目编号&#xff1a;01 文章目录 贪吃蛇小游戏1.0一…

我一直看不明白:“C++会被java/python等这些语言替代”

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「C的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01; 有些程序&#xff0c;是既可以…

使用 Cheerio 和 Node.js 进行网络搜刮 2024

Web scraping 是一种强大的技术&#xff0c;用于从网站提取数据&#xff0c;广泛应用于数据分析、市场研究和内容聚合。截至2024年&#xff0c;利用 Cheerio 和 Node.js 进行 web scraping 仍然是一种流行且高效的方法。本文将深入探讨使用 Cheerio 和 Node.js 进行 web scrapi…

第四站:Java紫——多线程与并发的神秘之地(二)

深入线程池与Future/Promise异步编程 在Java并发编程的征途上&#xff0c;理解线程池的使用和掌握异步编程模型是不可或缺的一环。接下来&#xff0c;我们将深入探讨ExecutorService线程池的创建与使用&#xff0c;以及如何利用Future和CompletableFuture进行异步编程&#xf…

SRAM和DRAM

1.SRAM&#xff08;静态RAM&#xff09; 把存放一个二进制位的物理器件称为存储元&#xff0c;它是存储器最基本的构件。 地址码相同的多个存储元构成一个存储单元。 存储单元的集合构成存储体。 静态RAM的存储元是用双稳态触发器&#xff08;六晶体管MOS&#xff09;来记忆…

介绍autofit

autofit.js是一个可以让你的PC项目自适应屏幕的工具&#xff0c;其原理非常简单&#xff0c;即在scale等比缩放的基础上&#xff0c;向右或向下增加了宽度或高度&#xff0c;以达到充满全屏的效果&#xff0c;使用autofit.js不会挤压、拉伸元素&#xff0c;它只是单纯的设置了容…

每天一个项目管理概念之虚拟团队

项目管理中的虚拟团队是一个由分布在全球各地的成员组成的团体&#xff0c;他们利用现代通信技术和网络工具进行协作&#xff0c;以实现共同的项目目标。虚拟团队打破了传统的物理办公室界限&#xff0c;允许来自不同文化背景、时区和专业领域的个人协同工作。这一概念在21世纪…

vue3 数据逻辑处理 将同一个 对应的id 的区分出来

先上代码 const groupedOptions {} // 使用对象来存储分组结果data.list.forEach(item > { // 遍历 groupList.value&#xff0c;检查是否有匹配的 idgroupList.value.forEach(group > {if (group.id item.groupId) {// 如果 group.id 在 groupedOptions 中不存在&…

C#结合JS 修改解决 KindEditor 弹出层问题

目录 问题现象 原因分析 范例运行环境 解决问题 修改 kindeditor.js C# 服务端更新 小结 问题现象 KindEditor 是一款出色的富文本HTML在线编辑器&#xff0c;关于编辑器的详细介绍可参考我的文章《C# 将 TextBox 绑定为 KindEditor 富文本》&#xff0c;这里我们讲述在…

人工智能不是一根魔杖——它有内在的问题

人工智能不是一根魔杖——它有内在的问题&#xff0c;很难解决&#xff0c;而且可能很危险 到目前为止&#xff0c;我们都听说过很多关于人工智能(AI)的事情。你可能已经使用过无数可用的人工智能工具。对一些人来说&#xff0c;人工智能就像一根预测未来的魔杖。 但人工智能…

[原创][Delphi多线程]使用TMonitor, TEvent和TQueue配合实现TThreadQueue的经典使用案例.

[简介] 常用网名: 猪头三 出生日期: 1981.XX.XX QQ: 643439947 个人网站: 80x86汇编小站 https://www.x86asm.org 编程生涯: 2001年~至今[共22年] 职业生涯: 20年 开发语言: C/C、80x86ASM、PHP、Perl、Objective-C、Object Pascal、C#、Python 开发工具: Visual Studio、Delph…

1 小时快速入门 DolphinDB

自从 DolphinDB 技能认证上线以来&#xff0c;大家学习和报考的热情就一路高涨。为了响应这份热情&#xff0c;DolphinDB 推出了一系列在线免费培训课程视频来帮助大家系统地学习和掌握 DolphinDB。 经过前后数月的精心准备和科学编排&#xff0c;《 DolphinDB 数据库入门》系…

Eureka Client 配置与高级功能

在上一篇文章中&#xff0c;我们介绍了 Eureka 的基本概念以及如何配置 Eureka Server。在这篇文章中&#xff0c;我们将继续介绍 Eureka Client 的配置以及 Eureka 的一些高级功能。 一、Eureka Client 配置 在一个微服务项目中&#xff0c;需要配置 Eureka Client 以便向 E…

有没有和ai聊天的软件?介绍这三款聊天软件

有没有和ai聊天的软件&#xff1f;在科技飞速发展的今天&#xff0c;人工智能&#xff08;AI&#xff09;已经渗透到我们生活的方方面面&#xff0c;其中AI聊天软件以其独特的魅力&#xff0c;赢得了越来越多用户的青睐。今天&#xff0c;我们就来一起探索三款智能聊天软件的功…

LogicFlow 学习笔记——9. LogicFlow 进阶 节点

LogicFlow 进阶 节点&#xff08;Node&#xff09; 连线规则 在某些时候&#xff0c;我们可能需要控制边的连接方式&#xff0c;比如开始节点不能被其他节点连接、结束节点不能连接其他节点、用户节点后面必须是判断节点等&#xff0c;想要达到这种效果&#xff0c;我们需要为…

Typora—适用于 Mac 和 Win 系统的优秀 Markdown 文本编辑器

Typora 是一款适用于 Mac 和 Win 系统的优秀 Markdown 文本编辑器&#xff0c;它以其简洁易用的界面和强大的功能受到了众多用户的喜爱。 首先&#xff0c;Typora 的界面设计非常简洁直观&#xff0c;没有过多繁杂的菜单和按钮&#xff0c;让用户能够专注于写作本身。它采用实时…

Java高级编程技术详解:从多线程到算法优化的全面指南

复杂度与优化 复杂度与优化在算法中的应用 算法复杂度是衡量算法效率的重要指标。了解和优化算法复杂度对提升程序性能非常关键。本文将介绍时间复杂度和空间复杂度的基本概念&#xff0c;并探讨一些优化技术。 时间复杂度和空间复杂度 时间复杂度表示算法执行所需时间随输…

LVS – NAT 模式集群构建

目录 1 环境准备 1.1 准备四台服务器 1.2 IP与网关均按照下图配置 1.3 网卡配置 1.4 real server 安装 web服务 1.5 安装ipvsadm 管理工具 2 使用ipvsadm管理LVS 2.1 创建集群指定使用的算法 2.2 添加真实服务器指定工作原理 2.3 查看是否正确创建集群 2.4 开启FORWARD路由转发…

每日一练 - PIM协议报文类型辨析

01 真题题目 在 PIM 协议中可能存在的报文是&#xff1a; A. JOIN/PRUNE B. ASSERT C. BOOTSTRAP D. REGISTER 02 真题答案 AB 03 答案解析 PIM&#xff08;Protocol Independent Multicast&#xff09;协议有两个主要的操作模式&#xff1a;PIM-Dense Mode (PIM-DM) 和 PIM…

​一个高清影像下载插件

数据是GIS的血液&#xff01; 虽然我们在水经微图&#xff08;简称“微图”&#xff09;中可以下载各种各样丰富的地图数据&#xff0c;但相信大家对数据的追求是无止境的。 我们现在就来分享一下&#xff0c;如何在QGIS中下载高清卫星影像的方法。 如果你需要最新版本的QGI…