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…

SRAM和DRAM

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

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

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

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

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

有没有和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;让用户能够专注于写作本身。它采用实时…

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路由转发…

​一个高清影像下载插件

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

最新下载:Hype 4 mac版【软件附加安装教程】

Hype是一款强大的Mac OS平台 HTML5 创作工具&#xff0c;它可以在网页上做出赏心悦目的动画效果&#xff0c;创建丰富的网页交互动画&#xff0c;支持层、时间轴等编辑方式&#xff0c;并能很好的导出HTML5/CSS3/JavaScript&#xff0c;在台式机&#xff0c;智能手机和iPad上流…

裁剪图片的最简单方法?这四种裁剪方法真的超级简单!

裁剪图片的最简单方法&#xff1f;在丰富多彩的现代生活中&#xff0c;图片成为了我们表达、沟通甚至展示身份的重要媒介&#xff0c;然而&#xff0c;无论是出于个人审美还是专业需求&#xff0c;图片的格式和尺寸往往成为了我们不得不面对的问题&#xff0c;特别是那些未经雕…

flink1.12.0学习笔记(一)-部署与入门

flink1.12.0学习笔记&#xff08;1&#xff09;-部署与入门 1-1-Flink概述 Flink诞生 Flink 诞生于欧洲的一个大数据研究项目 StratoSphere。该项目是柏林工业大学的一个研究性项目。早期&#xff0c; Flink 是做 Batch 计算的&#xff0c;但在 2014 年&#xff0c; StratoS…

mathtype7.6官方无需激活版安装包下载

大家好&#xff0c;今天我要和大家分享的是一款非常实用的数学工具——mathtype7.6最新版本&#xff01;&#x1f4d0; 作为一个数学专业的学生&#xff0c;我经常需要处理大量的数学公式和符号。以前我都是用手写或者电脑自带的公式编辑器&#xff0c;但是效率低下而且容易出错…

课设--学生成绩管理系统(二)

欢迎来到 Papicatch的博客 目录 &#x1f40b;引言 &#x1f988;编写目的 &#x1f988;项目说明 &#x1f40b;产品介绍 &#x1f988;产品概要说明 &#x1f988;产品用户定位 &#x1f988;产品中的角色 &#x1f40b; 产品总体业务流程图 &#x1f40b; 产品功…

装机必备-WinRAR安装教程

软件介绍&#xff1a;WinRAR 是一款功能强大的压缩包管理器&#xff0c;可用于备份数据&#xff0c;缩减电子邮件附件的大小&#xff0c;解压缩从 Internet 上下载的RAR、ZIP及其它类型文件&#xff0c;新建 RAR 及 ZIP 格式等的压缩类文件。这是我们新电脑或重装系统后必须安装…

adb常用命令详解--提升开发效率利器

文章目录 文件管理截屏与录屏logcat 使用dumpsys 相关ps 相关am 相关pm 相关wm 相关setprop 设置属性input 相关adb connect 远程无线调试其它 本文首发地址 https://h89.cn/archives/281.html 最新更新地址 https://gitee.com/chenjim/chenjimblog 博主 Linux 使用较多&#x…

04 翼型和机翼、尾翼几何选择

04 翼型和机翼、尾翼几何选择 4 -1 引言4-2 翼型的选择4-2-1 翼型的几何4-2-2 翼型的升力和阻力4-2-3 翼型选择与设计4-2-4 设计升力系数4-2-5 失速4-2-6 翼型厚度比4-2-7 关于翼型其他方面的考虑 4-3 机翼几何外形4-3-1 展弦比4-2-3 机翼后掠角4-3-3 机翼稍根比4-3-4 机翼扭转…

团结的力量:友情、互助与感恩

时间如白驹过隙&#xff0c;半载光阴转瞬即逝。回首过去的六个月&#xff0c;在CSDN平台上&#xff0c;我经历了无数的挑战和成长。在大厂和阿豪的帮助下&#xff0c;我的粉丝数终于突破了万大关。这不仅是我个人的成就&#xff0c;更是我们团结、互助和感恩精神的见证。 初识…