HTML前端开发-- Iconfont 矢量图库使用简介
一、SVG 简介及基础语法
1. SVG 简介
SVG(Scalable Vector Graphics)是一种基于 XML 的矢量图形格式,用于在网页上显示二维图形。SVG 图形可以无限缩放而不会失真,非常适合用于图标、图表和复杂图形。SVG 文件是文本文件,可以在任何文本编辑器中打开和编辑。
2. SVG 的优点
- 可缩放性:SVG 图形可以无限放大或缩小,而不会失真。
- 高质量:SVG 图形在任何分辨率下都能保持高质量。
- 可编辑性:SVG 文件是文本文件,可以使用任何文本编辑器进行编辑。
- 动画支持:SVG 支持复杂的动画效果。
- 搜索引擎友好:SVG 文件中的文本内容可以被搜索引擎索引。
3. SVG 的基本语法
SVG 使用 XML 格式来描述图形。以下是一些常用的 SVG 元素:
- <svg>:定义 SVG 画布。
- <rect>:绘制矩形。
- <circle>:绘制圆形。
- <ellipse>:绘制椭圆。
- <line>:绘制直线。
- <polyline>:绘制多条线段。
- <polygon>:绘制多边形。
- <path>:绘制任意路径。
- <text>:添加文本。
4. 示例代码
以下是一个简单的 SVG 示例,展示了如何绘制一个矩形和一个圆形:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><rect x="10" y="10" width="100" height="50" fill="blue" /><circle cx="150" cy="100" r="50" fill="red" />
</svg>
二、项目中使用 Iconfont 库
1. Iconfont 简介
Iconfont (阿里巴巴矢量图标库)是一个提供丰富图标资源的平台,提供了大量的免费图标资源。通过 Iconfont,开发者可以轻松地将图标集成到项目中,支持多种格式,包括 SVG、Font 等。
2. 为什么选择 Iconfont
- 丰富的图标资源:Iconfont 提供了数万个免费图标,涵盖了各种应用场景。
- 易于集成:Iconfont 提供了多种集成方式,包括在线生成代码、下载图标文件等。
- 可定制性:用户可以根据需要自定义图标颜色、大小等属性。
- 性能优化:Iconfont 生成的图标文件体积小,加载速度快。
3. 如何使用 Iconfont
3.1 注册并创建项目
- 访问 Iconfont 官网 并注册账号。
- 创建一个新的项目,并为项目命名。

3.2 选择图标
- 在素材库页面中,选择需要的图标,点击“加入购物车”。

- 点击“购物车”,选择需要的图标并添加到项目中。

3.3 项目中引入
官方引入文档:查看
以 symbol 引用 方式进行总结
- 在项目页面中,点击“添加至项目”按钮。
- 选择“在线生成代码”或“下载图标文件”。
- 如果选择“在线生成代码”,可以选择生成 HTML、CSS 或 SVG 代码。

- 新建
iconfont.js文件,拷贝项目下面生成的symbol代码,使用 js 引入页面
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js

- 加入通用css代码(引入一次就行):
<style type="text/css">.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
</style>
- 挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use>
</svg>
icon-xxx 为 js文件中的 图片id

相关文章:
HTML前端开发-- Iconfont 矢量图库使用简介
一、SVG 简介及基础语法 1. SVG 简介 SVG(Scalable Vector Graphics)是一种基于 XML 的矢量图形格式,用于在网页上显示二维图形。SVG 图形可以无限缩放而不会失真,非常适合用于图标、图表和复杂图形。SVG 文件是文本文件&#x…...
使用Allure作为测试报告生成器(Java+Selenium)
背景 JAVA项目中原先用Jenkinsseleniumselenium grid来日常测试UI并记录。 问题 当某一个testSuite失败时,当需要确认UI regression issue还是selenium test case自身的问题,需要去jenkins中查log,一般得到的是“Can not find element xxx…...
RocketMQ面试题合集
消费者获取消息是从Master Broker还是Slave Broker获取? Master Broker宕机,Slave Broker会自动切换为Master Broker吗? 这种Master-Slave模式不是彻底的高可用模式,他没法实现自动把Slave切换为Master。在RocketMQ 4.5之后&…...
Qt初识_对象树
个人主页:C忠实粉丝 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 C忠实粉丝 原创 Qt初识_对象树 收录于专栏【Qt开发】 本专栏旨在分享学习Qt的一点学习笔记,欢迎大家在评论区交流讨论💌 目录 什么是对象树 为什么要引…...
axios的get和post请求,关于携带参数相关的讲解一下
在使用 Axios 发送 HTTP 请求时,GET 和 POST 请求携带参数的方式有所不同。以下是关于这两种请求方法携带参数的详细讲解: GET 请求携带参数 对于 GET 请求,参数通常附加在 URL 之后,以查询字符串的形式传递。 直接在 URL 中拼接…...
Vue前端开发-路由其他配置
在路由文件中,除了跳转配置外,还可以进行路径重定向配置,如果没有找到对应的地址,还可以实现404的配置,同时,如果某个页面需要权限登录,还可以进行路由守卫配置,接下来,分…...
框架建设实战7——定时任务组件
在金融系统中,或者其他对账系统里,往往离不开分布式定时任务。用来做查证或者重试处理。 分布式job目前一般有如下三种: 1.elastic job 当当出品,比较老牌。新公司用的应该不多了。 2.xxl-job 个人开源项目。便于二开;有简洁的后管配置界面,方便接入。 3.powerjob …...
mybatis 整合 ehcache
pom.xml <!-- ehcache依赖 --><dependency><groupId>org.mybatis.caches</groupId><artifactId>mybatis-ehcache</artifactId><version>1.1.0</version></dependency>ehcache.xml <?xml version"1.0" en…...
【PlantUML系列】用例图(三)
目录 一、组成部分 二、典型案例 一、组成部分 参与者(Actors):使用关键字 actor 后跟参与者的名称。用例(Use Cases):使用关键字 usecase 后跟用例的名称和编号(可选)。系统边界…...
发送请求时遇到了数据库完整性约束错误 1048 Column ‘platform‘ cannot be null
可以这样解决 在 Vue 2 中封装接口请求时,确保每次请求都包含 platform Header 参数的最佳实践是通过创建一个全局的 Axios 实例,并为这个实例设置默认的 Header。这样可以确保所有通过该实例发送的请求都会自动包含 platform 参数。此外,你…...
三菱FX3U模拟量产品的介绍
FX3u可编程控制器模拟量产品包括:特殊适配器、特殊功能模块的连接 1、连接在FX3U可编程控制器的左侧。 2、连接特殊适配器时,需要功能扩展板。 3、最多可以连接4台模拟量特殊适配器。 4、使用高速输入输出特殊适配器时,请将模拟量特殊适配器连…...
pdf转图片
目录 pdf2image库 PyMuPDF库 python-office库 pdfplumber库 pdf2image库 安装:pip install pdf2image 使用时会报错:pdf2image.exceptions.PDFInfoNotInstalledError: Unable to get page count. Is poppler installed and in PATH? 需要安装 po…...
Go 协程上下文切换的代价
在 Go 语言中,协程(Goroutine)是一种非常轻量级的并发执行单元,设计之初就是为了简化并发编程并提高性能。协程的上下文切换被认为是非常高效的,但是它的真正性能优势需要我们深入了解其背后的机制。 本文将深入探讨 …...
HTTP 持久连接(长连接)
HTTP 持久连接(长连接) HTTP 持久连接(HTTP Persistent Connections),也常被称作 HTTP 长连接,是 HTTP 协议中的一种重要特性,以下是关于它的详细介绍: 一、基本概念 在传统的 HTT…...
12月10日IO
作业:使用read和write实现拷贝文件,将1.txt内容前一半拷贝给2.txt后一半拷贝给3.txt #include <myhead.h>int main(int argc, const char *argv[]) {//打开三个文件int fd1,fd2,fd3;fd1open("1.txt",O_RDONLY);fd2open("2.txt&quo…...
Composite Pattern
Composite Pattern The intent of Composite pattern is to composite objects into tree structures to represent a “part-whole” hierarchy .The Composite Pattern allow clients to treat individual objects and composite objects uniformly. UML Used in Qt Exam…...
Springboot MVC
1. Springboot为MVC提供的自动配置 Spring Boot 为 Spring MVC 提供了自动配置,这在大多数应用程序中都能很好地工作。除了已经实现了 Spring MVC 的默认功能外,自动配置还提供了以下特性: 包括 ContentNegotiatingViewResolver 和 BeanNam…...
MySQL数据表记录增操作
对数据库的操作用的最最频繁的呢,总结起来就四个字:增删改查! 查是属于DQL(Data QueryLanguage ,数据查询语言)部分,而增、改、删属于DML(Data Manipulation Language, 数据操纵语言) 增:作用是往数据库的数据表里写入记录值 语…...
maven报错“找不到符号“
问题 springboot项目 maven编译打包过程,报错"找不到符号" 解决 很多网上方法都试过,都没用 换jdk,把17->21...
python进阶-05-利用Selenium来实现动态爬虫
python进阶-05-利用Selenium来实现动态爬虫 一.说明 这是python进阶部分05,我们上一篇文章学习了Scrapy来爬取网站,但是很多网站需要登录才能爬取有用的信息,或者网站的静态部分是一个空壳,内容是js动态加载的,或者人机验证&…...
终极指南:使用OpenCore Legacy Patcher让旧Mac焕发新生,完整支持最新macOS
终极指南:使用OpenCore Legacy Patcher让旧Mac焕发新生,完整支持最新macOS 【免费下载链接】OpenCore-Legacy-Patcher 体验与之前一样的macOS 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 你是否有一台性能依然强…...
终极指南:如何用Continue AI代码助手提升10倍开发效率
终极指南:如何用Continue AI代码助手提升10倍开发效率 【免费下载链接】continue ⏩ Continue is an open-source autopilot for VS Code and JetBrains—the easiest way to code with any LLM 项目地址: https://gitcode.com/GitHub_Trending/co/continue …...
数据科学家的懒人包:OpenClaw+nanobot自动清洗CSV并生成可视化报告
数据科学家的懒人包:OpenClawnanobot自动清洗CSV并生成可视化报告 1. 为什么需要自动化数据清洗与报告生成? 作为一名经常处理数据的人,我发现自己每周都在重复同样的工作:收到CSV文件→检查格式→处理缺失值→生成可视化→发送…...
数字古籍下载工具使用指南:从入门到精通
数字古籍下载工具使用指南:从入门到精通 【免费下载链接】bookget bookget 数字古籍图书下载工具 项目地址: https://gitcode.com/gh_mirrors/bo/bookget 数字古籍下载工具是一款专为古籍爱好者和研究者设计的资源获取软件,能够帮助用户高效检索、…...
实测Qwen3-VL-30B:上传图片就能问,智能识别效果惊艳
实测Qwen3-VL-30B:上传图片就能问,智能识别效果惊艳 你有没有想过,给电脑看一张照片,它不仅能告诉你照片里有什么,还能像朋友一样跟你讨论照片里的故事?比如,你拍了一张晚餐的照片,…...
Win11Debloat:Windows 11系统优化与隐私保护终极指南
Win11Debloat:Windows 11系统优化与隐私保护终极指南 【免费下载链接】Win11Debloat 一个简单的PowerShell脚本,用于从Windows中移除预装的无用软件,禁用遥测,从Windows搜索中移除Bing,以及执行各种其他更改以简化和改…...
基于PHP、asp.net、java、Springboot、SSM、vue3的高校课堂考勤系统的设计与实现
目录 可选框架 可选语言 内容 可选框架 J2EE、MVC、vue3、spring、springmvc、mybatis、SSH、SpringBoot、SSM、django 可选语言 java、web、PHP、asp.net、javaweb、C#、python、 HTML5、jsp、ajax、vue3 内容 随着教育的深化变革,成百上千的同学走进大学的…...
AcousticSense AI作品分享:识别不同音乐流派的频谱图展示
AcousticSense AI作品分享:识别不同音乐流派的频谱图展示 1. 当AI学会"看"音乐:频谱图里的流派密码 你有没有想过,AI是如何像人类一样理解音乐的?传统方法往往依赖复杂的音频特征提取,而AcousticSense AI选…...
索引——数据库中又一个面试常考的内容(1)
当我们系统的学习了数据行的CRUD操作以后,尤其是查询,是四者之中最复杂的,于是,我们就想高效地查询、更新表中的数据,索引就应运而生了。为什么要使用索引?一句话,就是提升查询效率。MYSQL数据库…...
Spring AI + DeepSeek 实战:5分钟搞定一个能听懂人话的数据库查询工具
Spring AI DeepSeek 实战:5分钟搞定一个能听懂人话的数据库查询工具 在数据驱动的时代,数据库查询是每个开发者绕不开的日常任务。但当你面对产品经理频繁变更的需求,或是运营同事临时提出的数据提取请求时,反复编写和调试SQL语句…...
