icon图标深入指南
图标是网络上常用的元素。 它们是通用的,可以立即识别,可以非常吸引人,引起注意,并且(如果使用正确)可以提供出色的用户体验。
在网络上实现图标时,我们有很多选择:
- Icon Spritesheet – 图标精灵(雪碧图)
- Icon font – 图标字体
- Inlined SVG – 内联SVG
- SVG as an image element – SVG作为图像元素
它们中的一些如今已很常见,例如SVG元素(SVG elements)和Icon字体。 在本文中,我们将深入研究在Web上实现Icon的每种方法,并看看哪种方法在性能、可访问性、样式选项和浏览器支持方面是最佳的。
一、Icon Spritesheet(图标精灵)
我们通过将较小的图像(icon)文件合并为一个较大的文件来创建Icon Spritesheet。 我们需要使用CSS background-image
,background-size
和background-position
来显示Spritesheet中的图像。

我们可以使用SVG Spritesheet
结合PNG Spritesheet
来确保图标在各种显示(常规和视网膜)上看起来都不错,以作为旧版浏览器的后备。 我们可以使用像Modernizr
(https://modernizr.com/)这样的JavaScript
库来检测用户浏览器是否支持SVG
,如果不支持SVG
,则提供PNG
后备。
让我们创建一个可访问的图标:
<span aria-hidden="true" class="icon icon--email"></span>
<span class="hidden--visually">给我发邮件</span>
Spritesheet CSS
示例(可以生成或手动添加):
.icon {
background-image: url('../images/spritesheet.svg');
background-repeat: no-repeat;
display: inline-block;
width: 64px;
height: 64px;
}
.no-svg .icon {
background-image: url('../images/spritesheet.png');
}
.icon--email {
width: 64px;
height: 64px;
background-position: 0px 0px;
}
如果您想了解隐藏的可视化CSS类以及如何可访问地隐藏内容,我已经在我以前的一篇文章中对其进行了详细说明(accessibility-hiding-content)。
我们在bootstrap里面看到aria-hidden
属性的使用,如:
<div id="modal" class="modal" aria-hidden="true">
<div class="modal-header">...</div>
<div class="modal-body">...</div>
<div class="modal-footer">...</div>
</div>
现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容(尤其是当图标纯粹作为装饰用途时),我们为这些图标设置了 aria-hidden=“true” 属性。
https://v3.bootcss.com/javascript/#modals
让我们看一下使用图标精灵表的利弊。
优点:
- 添加图标的过程可以轻松实现自动化。
- 图像优化技术可以减少Spritesheet文件的大小。
- 在所有显示器上均可正常使用(使用SVG Spritesheet时)。
- 强大的浏览器支持(使用PNG后备广告时)。
- 减少请求数(在不使用HTTP / 2时有用)。
缺点:
- 开箱即用,无法访问。 需要使用其他HTML元素手动添加可访问性。
- 差的样式选项。
- 图标的所有变体都需要作为一个单独的元素添加到Spritesheet中。
- 如果多个人同时向其添加新图标,则可能会发生冲突。
- 使用HTTP / 2时没有性能优势。
一些工具:
- Sprite Cow,在线Spritesheet图像和CSS生成器。(http://www.spritecow.com/)
- PostCSS lazysprite,PostCSS插件,用于自动生成Spritesheet图像和CSS。(https://www.npmjs.com/package/postcss-lazysprite)
- gulp-svg-sprite-Gulp插件,用于自动生成Spritesheet图像和CSS。(https://www.npmjs.com/package/gulp-svg-sprite)
二、Icon font(图标字体)
我们可以将包含图标的字体文件生成,而不是将我们的图标图像文件组合成单个图像文件。 浏览器会将它们视为文本,并且可以使用文本样式轻松自定义它们。
有许多工具可以使图标字体文件和CSS文件的生成非常容易且易于管理。 生成的CSS文件如下所示:
/* 定义字体图标字体系列 */
@font-face {
font-family: 'myIconFont';
src: url('/path/to/myIconFont.ttf?r9c57c') format('truetype'),
url('/path/to/myIconFont.woff?r9c57c') format('woff'),
url('/path/to/myIconFont.svg?r9c57c#myIconFont') format('svg');
font-weight: normal;
font-style: normal;
}
/* 定义用于设置字体系列和共享字体样式的图标类 */
.icon {
font-family: 'myIconFont';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 定义单个图标类,该图标类将图标插入为伪元素中的字符 */
.icon--email::before {
content: '\e900';
}
我们可以使用类似的标记来创建一个可访问的图标:
<span aria-hidden="true" class="icon icon--email"></span>
<span class="hidden--visually">给我发邮件</span>
让我们看一下使用字体图标的利弊。
优点:
- 良好的优化选项。
- 可轻松编辑并使用各种工具生成。
- 强大的浏览器支持。
- 真正简单易用。
缺点:
- 字体抗锯齿可能会导致图标渲染出现问题。
- 下载和加载字体文件时无显示。
- 如果用户使用特定的字体或样式覆盖,可以很容易地覆盖。
- 开箱即用,无法访问。 辅助功能需要手动添加。
一些工具:
- iconfont-阿里巴巴矢量图标库(https://www.iconfont.cn/)
- icomoon-管理和生成图标字体文件和CSS(https://icomoon.io/)
- fontello-管理和生成图标字体文件和CSS(http://fontello.com/)
- icon-font-generator-NPM插件,用于从SVG图标生成图标字体(https://www.npmjs.com/package/icon-font-generator)
三、Inline SVG icons(内联SVG)
我们可以直接将SVG
数据插入HTML
文档中,而无需包括一些文件(spritesheet或图标字体)并在CSS
的标记中添加图标,而是浏览器将解析并显示SVG
元素。 内联SVG
元素是高度可定制的,因为我们甚至可以设置单个SVG
元素的样式。
让我们看一下使用嵌入式SVG的可访问图标的外观:
<svg labelledby="titleId descId" role="group">
<title id="titleId">标题</title>
<desc id="descId">说明</desc>
<!-- SVG图标代码 -->
</svg>
我们使用带有title
和desc
SVG元素的labelledby=“titleId descId”
使辅助设备可以访问该元素。 还需要注意的是,应在辅助设备应忽略的SVG
元素的图形部分上使用role=“presentation”
。
让我们看一下使用嵌入式SVG图标的利弊。
优点:
- 无需额外的加载时间即可加载HTML文档。
- 没有其他HTTP请求。
- 良好的可访问性支持,无需其他HTML元素。
- 在各种屏幕上看起来很棒。
- 就样式选项而言最好(甚至可以对元素内的元素进行样式设置)。
缺点:
- 复杂的HTML文档标记(取决于所使用的框架)。
- 难以管理和维护(取决于所使用的框架)。
- 图标未缓存。
- 不支持某些较旧(且使用较少)的浏览器。
注意:
一些框架使图标的管理和维护更加容易。 例如,Webpack
可以将所有导入MyIcon
从“/path/to/myIcon.svg
”转换为生产版本上的内联SVG
。 因此对于开发人员来说,我们有一个易于维护的简单标记。
四、SVG作为图像元素
我们可以将图标保留为单独的文件,而不必使用HTML中的整个SVG标记,而是使用<img>
这个HTML元素将其包含在我们的标记中。 这使我们能够拥有简单且可维护的标记以及较小的文件大小。 我们还可以将元素的本机可访问性功能用于图标。
让我们使用这种方法创建一个可访问的图标:
<img src="email.svg" alt="给我发邮件">
我们可以使用srcset为较旧的浏览器用PNG来“替补”:
<img src="email.png" alt="给我发邮件" srcset="email.svg">
img 元素的 srcset 属性常用于浏览器根据宽、高和像素密度来加载相应的图片资源。
属性格式:图片地址 宽度描述w 像素密度描述x,多个资源之间用逗号分隔。例如:
<img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" />
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img
支持srcset的浏览器也支持SVG元素,它们将自动加载SVG图像。 不支持它的浏览器将加载PNG后备。
让我们看一下在图像元素中使用SVG的利弊。
优点:
- 简单标记。
- 内置带有alt标签的简单辅助功能选项。
- 良好的浏览器支持(如果使用PNG后备)。
- 图像文件大小可以优化。
- 图像文件可以缓存(一次下载)。
缺点:
- 不好的样式选择。
- 图标的每个变体(例如,不同的颜色)应放在单独的文件中。
- 每个图标都需要一个服务器请求(如果未缓存的话)。
原文:https://xushanxiang.com/2019/12/web-icon-depth-guide.html
icon图标深入指南的更多相关文章
- 为BlueLake主题增加自定义icon图标
一.前言 hexo 的 Bluelake 主题是我一直在用的,简单大方,很喜欢.但最近有了添加自定义 icon 图标的需求,比如,添加 "地址"."扫一扫".& ...
- 用字体在网页中画Icon图标
第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...
- JS组件系列——不容错过的两款Bootstrap Icon图标选择组件
前言:最近好多朋友在群里面聊到bootstrap icon图标的问题,比如最常见的菜单管理,每个菜单肯定需要一个对应的菜单图标,要是有一个可视化的图标选择组件就好了,最好是直接选择图标,就能得到对应的 ...
- 字体在网页中画ICON图标
用字体在网页中画ICON图标有三种小技巧: 1.用CSS Sprite在网页中画小图标 实现方法: 首先将小图片整合到一张大的图片上 然后根据具体图标在大图上的位置,给背景定位.background- ...
- Ext.Net TreePanel 修改Icon图标
分类: Ext.Net2012-09-24 13:44 1779人阅读 评论(0) 收藏 举报 webformserverextassemblyxhtmlobject 1.默认icon 2.自定义ic ...
- QT5.5.0版本添加icon图标步骤
1.制作icon图标文件 可以进入这个网站在线制作:http://www.ico.la/ 2.创建资源文件:qrc文件 接着 添加2两项,先点击prefix,然后添加文件--->图标路径 3.可 ...
- 启动页面设置,icon图标设置
更多尺寸像素如何放置请看:http://chicun.jammy.cc/ 如何设置App的启动图,也就是Launch Image? 新建一个iosLaunchImage文件夹
- Flatty Shadow在线为Icon图标生成长阴影效果。
Flatty Shadow在线为Icon图标生成长阴影效果. Flatty Shadow 彩蛋爆料直击现场 Flatty Shadow在线为Icon图标生成长阴影效果.
- Flex利用titleIcon属性给Panel容器标题部添加一个ICON图标
Flex利用titleIcon属性,给Panel容器标题部添加一个ICON图标. 让我们先来看一下Demo(可以右键View Source或点击这里察看源代码): 下面是完整代码(或点击这里察看): ...
随机推荐
- eNSP 简介及基础操作
eNSP 一. eNSP简介 eNSP是一款由华为自主研发的.免费的.可扩展的.图形化操作的网络仿真工具平台,主要对企业网络路由器.交换机及相关物理设备进行软件仿真,支持大型网络模拟.界面如下: 界面 ...
- 洛谷 题解 CF299A 【Ksusha and Array】
本蒟蒻又双叒叕被爆踩辣! 这就是道大水题 首先,题目意思: 给你n个数,要你找这些数字中找到一个能够被这些所有数字整除的数,若有多个,可任意输出其中一个,其实答案只有一个,因为在大于等于自己的数中能被 ...
- dubbo服务治理框架
Dubbo的概述 1.1. Dubbo的背景 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. ...
- [TimLinux] docker CentOS7 入门——容器(1)
1. 编写Dockerfile # 将官方 Python 运行时用作父镜像 FROM python: # 将工作目录设置为 /app WORKDIR /app # 将当前目录内容复制到位于 /app ...
- [TimLinux] django WSGI入口分析及自定义WSGIHandler思路
1. 命令行启动 命令行是通过runserver子命令来启动的,对应的django模块为django.core.management.commands.runserver,调用关系结构: # 简化的运 ...
- CF240E Road Repairs(最小树形图-记录路径)
A country named Berland has n cities. They are numbered with integers from 1 to n. City with index 1 ...
- Orleans 序列化遇到的坑
真的是巨坑 搞明白问题的我简直无法用言语来描述我的心情 先上架构图 理想中的架构 服务随便上 网关只负责分发 然后跟随官方教程写遇到了序列化问题 以前有经验,不慌,以前稀里糊涂就搞定了. 再然后遇到一 ...
- 基于iCamera测试光电大赛官方指定摄像头mt9m001调试小结
基于iCamera测试光电大赛官方指定摄像头mt9m001调试小结 先看看官方的接口 组委会指定的模块接口 信号定义说明: VDD:3.3v GND:地 SCK:摄像头寄存器的iic配置信号的时钟线 ...
- 从零开始的openGL——四、纹理贴图与n次B样条曲线
前言 在上篇文章中,介绍了如何加载绘制模型以及鼠标交互的实现,并且遗留了个问题,就是没有模型表面没有纹理,看起来很丑.这篇文章将介绍如何贴纹理,以及曲线的绘制. 纹理贴图 纹理加载 既然是贴图,那首先 ...
- Java_计算1-100的和,奇数和
public class Work1{ public static void main(String[] args){ // 定义和并赋值 int sum = 0; for(int i = 1;i & ...