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动态加载的,或者人机验证&…...
CnDataSeed 发布:中国城市公共服务空间匹配数据库(CUSMD)
一、数据简介透视城市公共服务供需格局,量化空间公平与发展质量!在城市高质量发展与共同富裕持续推进的背景下,公共服务体系的评价标准正在从“资源供给规模”逐步转向“居民真实可达体验”。教育、医疗、文化体育、交通与公共安全等公共服务…...
D3KeyHelper实战指南:从入门到精通的认知跃迁
D3KeyHelper实战指南:从入门到精通的认知跃迁 【免费下载链接】D3keyHelper D3KeyHelper是一个有图形界面,可自定义配置的暗黑3鼠标宏工具。 项目地址: https://gitcode.com/gh_mirrors/d3/D3keyHelper D3KeyHelper是一款专为《暗黑破坏神3》设计…...
OpenClaw飞书机器人速成:GLM-4.7-Flash对话触发与任务执行
OpenClaw飞书机器人速成:GLM-4.7-Flash对话触发与任务执行 1. 为什么选择OpenClaw飞书GLM组合? 去年夏天,当我第一次尝试用自然语言让AI帮我整理会议录音时,经历了整整三天的挫败——要么是云端API调用太贵,要么是本…...
如何使用NoFences实现高效的Windows桌面图标管理
如何使用NoFences实现高效的Windows桌面图标管理 【免费下载链接】NoFences 🚧 Open Source Stardock Fences alternative 项目地址: https://gitcode.com/gh_mirrors/no/NoFences NoFences是一款开源免费的Windows桌面管理工具,专门用于解决桌面…...
s2-pro镜像管理:容器健康检查脚本编写与自动化服务恢复方案
s2-pro镜像管理:容器健康检查脚本编写与自动化服务恢复方案 1. 引言 s2-pro作为专业级语音合成模型镜像,在实际业务场景中承担着重要角色。当服务出现异常时,如何快速发现问题并自动恢复成为运维工作的关键。本文将详细介绍如何为s2-pro编写…...
Zotero插件市场:变革学术研究工具管理的创新解决方案
Zotero插件市场:变革学术研究工具管理的创新解决方案 【免费下载链接】zotero-addons Zotero add-on to list and install add-ons in Zotero 项目地址: https://gitcode.com/gh_mirrors/zo/zotero-addons 在数字化学术研究的进程中,文献管理工具…...
贪心-摆动序列、不重叠字串数量
Ref 贪心B站搜索-折半搜索 分发饼干 class Solution { public:int findContentChildren(vector<int>& g, vector<int>& s) {sort(g.begin(),g.end());sort(s.begin(),s.end());int cnt0;for(int i0,j0;i<g.size()&&j<s.size();){if(s[j]&…...
Cogito-v1-preview-llama-3B效果展示:STEM题目分步推导+代码生成真实截图
Cogito-v1-preview-llama-3B效果展示:STEM题目分步推导代码生成真实截图 1. 模型能力概览 Cogito v1 预览版是Deep Cogito推出的混合推理模型系列,在大多数标准基准测试中均超越了同等规模下最优的开源模型。这个3B参数的模型在编码、STEM题目解答、指…...
告别低效循环:利用快马平台智能生成向量化代码,提升数据处理性能
最近在做一个数据分析项目时,遇到了性能瓶颈。处理一个几十万行的数据集时,简单的循环操作竟然要跑好几分钟。经过一番摸索,我发现向量化操作真是个神器,今天就分享一下如何用NumPy和Pandas来提升数据处理效率。 首先我们创建一个…...
OpenClaw+GLM-4.7-Flash:24小时运行的智能监控助手
OpenClawGLM-4.7-Flash:24小时运行的智能监控助手 1. 为什么需要智能监控助手? 去年我负责维护一个内部文档站点时,经常遇到半夜服务崩溃却无人知晓的情况。直到第二天同事反馈"页面打不开",我才手忙脚乱地查日志、重…...
