iconfont的使用(超简单)

news2024/12/29 10:15:28

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.coloradmin.cn/o/1831398.html

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

相关文章

基于Python的花卉识别分类系统【W9】

简介&#xff1a; 基于Python的花卉识别分类系统利用深度学习和计算机视觉技术&#xff0c;能够准确识别和分类各种花卉&#xff0c;如玫瑰、郁金香和向日葵等。这种系统不仅有助于植物学研究和园艺管理&#xff0c;还在生态保护、智能农业和市场销售等领域展现广泛应用前景。随…

springboot原理篇-bean管理

springboot原理篇-bean管理&#xff08;二&#xff09; 我们今天主要学习IOC容器中Bean的其他使用细节&#xff0c;主要学习以下三方面&#xff1a; 如何从IOC容器中手动的获取到bean对象bean的作用域配置管理第三方的bean对象 一、获取Bean 了解即可&#xff0c;默认情况下…

将Vite添加到您现有的Web应用程序

Vite&#xff08;发音为“veet”&#xff09;是一个新的JavaScript绑定器。它包括电池&#xff0c;几乎不需要任何配置即可使用&#xff0c;并包括大量配置选项。哦——而且速度很快。速度快得令人难以置信。 本文将介绍将现有项目转换为Vite的过程。我们将介绍别名、填充webp…

Springboot整合阿里云ONS RocketMq(4.0 http)

1. 引入依赖 <!--阿里云ons&#xff0c;方便的接入到云服务--> <dependency><groupId>com.aliyun.openservices</groupId><artifactId>ons-client</artifactId><version>1.8.4.Final</version> </dependency>2. 配置 配…

牛客周赛 46 F 祥子拆团

原题链接&#xff1a;F-祥子拆团 题目大意&#xff1a;多测&#xff0c;每次给a,b&#xff0c;要将a分解成b个数相乘&#xff0c;问有多少种分的方法。 思路&#xff1a;对a进行质因数分解&#xff0c;对每一个质数计数&#xff0c;然后分到b个篮子里面&#xff0c;允许篮子里…

SFNC —— 图像格式控制(三)

系列文章目录 SFNC —— 标准特征命名约定&#xff08;一&#xff09; SFNC —— 设备控制&#xff08;二&#xff09; SFNC —— 图像格式控制&#xff08;三&#xff09; 文章目录 系列文章目录4、图像格式控制&#xff08;Image Format Control&#xff09;1. 图像格式控制&…

Flink系列之:Generating Watermarks生成水印

Flink系列之&#xff1a;Generating Watermarks生成水印 一、水印策略简介二、使用水印策略三、处理闲置资源四、水印对齐五、编写水印生成器六、编写周期性水印生成器七、编写标点水印生成器八、水印策略和 Kafka 连接器九、Operators如何处理水印十、已弃用的AssignerWithPer…

电信网关配置管理系统 del_file.php 前台RCE漏洞复现

0x01 产品简介 中国电信集团有限公司(英文名称“China Telecom”、简称“中国电信”)成立于2000年9月,是中国特大型国有通信企业、上海世博会全球合作伙伴。电信网关配置管理系统是一个用于管理和配置电信网络中网关设备的软件系统。它可以帮助网络管理员实现对网关设备的远…

护眼台灯哪个牌子最好?学生台灯护眼好还是防近视好

当前&#xff0c;我国正面临日益严峻的青少年近视挑战。从小学到大学&#xff0c;学生的近视率居高不下&#xff0c;其中高度近视的比例更是令人担忧。这不仅直接威胁到孩子们的身体健康和视力发育&#xff0c;从长远来看&#xff0c;还可能对国家的未来发展和国家安全产生不利…

RTSP/Onvif安防监控平台EasyNVR抓包命令tcpdump使用不了,该如何解决?

安防视频监控汇聚EasyNVR智能安防视频监控平台&#xff0c;是基于RTSP/Onvif协议的安防视频平台&#xff0c;可支持将接入的视频流进行全平台、全终端分发&#xff0c;分发的视频流包括RTSP、RTMP、HTTP-FLV、WS-FLV、HLS、WebRTC等格式。平台可提供的视频能力包括&#xff1a;…

gitlab仓库中用git bash生成不是默认路径的ssh秘钥

使用命令 ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 会在默认路径生成秘钥&#xff0c;&#xff08;C:\Users\用户\.ssh\&#xff09; 想要修改默认路径使用如下命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com"…

软链接和硬链接的详解 (Linux系统下)

文章目录 硬链接的引入软链接和硬链接的形成软链接硬链接 软硬链接区别的探究硬链接数结语 硬链接的引入 当我们在命令行中输入ll时会出现很多行信息&#xff0c;详情请看下面的图 ~~~~εεε(&#xffe3;▽&#xffe3;) 我在之前的几篇Linux的文章也讲过哦 (o&#xff9f;v…

2024最新版Node.js下载安装及环境配置教程(非常详细)

一、进入官网地址下载安装包 官网&#xff1a;Node.js — Run JavaScript Everywhere 其他版本下载&#xff1a;Node.js — Download Node.js (nodejs.org) 选择对应你系统的Node.js版本 二、安装程序 &#xff08;1&#xff09;下载完成后&#xff0c;双击安装包&#xf…

小白Linux提权

1.脏牛提权 原因&#xff1a; 内存子系统处理写入复制时&#xff0c;发生内存条件竞争&#xff0c;任务执行顺序异常&#xff0c;可导致应用崩溃&#xff0c;进一步执行其他代码。get_user_page内核函数在处理Copy-on-Write(以下使用COW表示)的过程中&#xff0c;可能产出竞态…

项目方案:社会视频资源整合接入汇聚系统解决方案(六)

目录 一、概述 1.1 应用背景 1.2 总体目标 1.3 设计原则 1.4 设计依据 1.5 术语解释 二、需求分析 2.1 政策分析 2.2 业务分析 2.3 系统需求 三、系统总体设计 3.1设计思路 3.2总体架构 3.3联网技术要求 四、视频整合及汇聚接入 4.1设计概述 4.2社会视频资源分类…

5G消息 x 政务 | 新型数智政务服务平台

5G消息 x 政务 | 新型数智政务服务平台 通过 5G 消息&#xff0c;帮助政府部门及公共事业部门优化服务品质、提高服务效能&#xff0c;打造现代政府的展示窗口、便民利企的服务窗口、营商环境的感知窗口&#xff0c;提供多元、透明、高效的线上政务服务。 5G消息 x 政务 —— 优…

新闻稿标题怎么写吸引人?建议收藏

一个好的标题&#xff0c;不仅能激发读者的好奇心&#xff0c;还能引导他们继续深入了解文章内容。本文伯乐网络传媒将为你揭秘新闻稿标题写作的十大技巧&#xff0c;让你轻松写出吸引人的标题。 1. 激发好奇心 a. 提出疑问&#xff1a;以问句的形式提出问题&#xff0c;让读者…

​1:25万基础电子地图(江西版)

我们在《50幅1:25万基础电子地图&#xff08;四川版&#xff09;》和《1&#xff1a;25基础电子地图&#xff08;云南版&#xff09;》等文中&#xff0c;为你分享过四川和云南的基础电子地图。 现在我们再为你分享江西的1&#xff1a;25万基础电子地图&#xff0c;你可以在文…

申请国外访问学者面签技巧有哪些?

申请国外访问学者面签是一项重要的步骤&#xff0c;关系到能否成功获得访问学者身份。以下是一些实用的面签技巧&#xff0c;帮助您顺利通过面试。 1.充分准备材料 成功的面签始于准备充分的材料。确保您的申请材料齐全&#xff0c;包括&#xff1a; 个人简历&#xff1a;突出…

Inpaint软件下载附加详细安装教程

​Inpaint是一款由Maxim Gapchenko开发的图像处理软件&#xff0c;它可以帮助用户轻松地去除图像中的水印和其他不需要的元素&#xff0c;这个软件的核心技术是基于图像处理算法的&#xff0c;它可以自动识别图片中的像素&#xff0c;并用周围的颜色进行替换&#xff0c;使得图…