图标是网络上常用的元素。它们是通用的，可立即识别的，可以非常吸引人，吸引注意力，并提供良好的用户体验。
当我们在线实现图标时，我们有许多选择:
图标简化表格
图标字体
内嵌SVG
作为图像元素的SVG
其中有一些是现在比较常用的，比如SVG元素和图标字体。在本文中，我们将深入研究在网页上实现图标的每种方法，看看哪种方法在性能、可访问性、样式选项和浏览器支持方面是最好的。
图标简化表格
我们通过将较小图像记录组合成较大的文件来创建图标向导表。我们需要使用CSS背景图像、背景大小和背景位置来显示sprite表中的图像。
图标精简 示例我们可以使用SVG压缩表来保证图标在各种显示器上看起来很棒，并结合PNG压缩表作为老式浏览器的备份。我们可以使用Modernizr这样的Javascript库来检查用户的浏览器是否支持SVG，如果不支持就提供PNG回退。
让我们创建一个无障碍图标:
给我发电子邮件>
Spritessheet CSS示例:
。图标{ background-image:URL；背景-重复:不重复；显示:内嵌-块；宽度:64px身高:64px} .不-svg。图标{ background-image:URL；} .图标-电子邮件{ width:64px；身高:64px背景-位置:0px 0px}
让我们回顾一下使用图标向导表的优点和缺点。
优势:
添加图标的过程可以很容易地自动化。
图像优化技术可以减小简化表格文件的大小。
它在所有显示器上都能正常工作。
强大的浏览器支持
减少请求的数量
缺点:
不能开箱即用。可访问性要求手动添加额外的HTML元素。
糟糕的样式选项
图标的所有变体都需要作为单独的元素添加到spritessheet中。
如果多个用户同时添加新图标，就会发生冲突。
使用HTTP/2没有性能优势
工具:
Sprite Cow-在线spritesheet图像和CSS生成器
CSS-Lazy Sprite-Post CSS插件，用于自动生成向导表格图像和CSS
Gulp-svg-sprite-Gulp插件，用于自动生成spitessheet图像和CSS。
图标字体
我们可以生成包含图标的字体文件，而不是将图标图像文件合并成一个图像文件。浏览器将它们视为文本，并可以使用文本样式轻松定制它们。
有许多工具可以使生成图标字体文件和CSS文件变得容易和易于管理。生成的CSS文件可能如下所示:
@ font-face { font-family:' myIconFont '；src: url格式，url格式，url格式；字体粗细:正常；字体样式:正常；}。icon { font-family:' myIconFont '；说话:无；字体样式:正常；字体粗细:正常；字体变体:正常；文本转换:无；行高:1；-webkit-font-smoothing:抗锯齿；-moz-osx-font-smoothing:灰度；}。icon-email::before { content:“ e900”；}
我们可以使用类似的标签来创建可访问的图标:
给我发电子邮件>
让我们回顾一下使用字体图标的优点和缺点。
优势:
良好的优化选项
易于编辑和生成的各种工具
出色的浏览器支持
真的很好用很方便
缺点:
字体消除锯齿可能会导致图标渲染问题。
下载和加载字体文件时，不显示任何内容。
如果用户用特定的字体或样式重写，它可以很容易地被重写。
不能开箱即用。辅助功能需要手动添加。
工具:
管理和生成图标字体文件和CSS
管理和生成图标字体文件和CSS
图标-字体-生成器-NPM插件用于从SVG图标生成图标字体
内嵌SVG图标
我们可以直接在HTML文档中插入SVG数据，浏览器会解析并显示SVG元素，而不需要包含一些文件，也不需要使用CSS在标记中添加图标。内联SVG元素是高度可定制的，因为我们甚至可以设计单个SVG元素的样式。
让我们看看使用内联SVG的可访问图标是什么样子的:
示例标题解释此示例的详细说明
我们将标签by = "title id descid "与标题和desc SVG元素结合使用，使辅助设备可以访问这些元素。还需要注意的是，role = "presentation "应该用于SVG元素的图形部分，辅助设备应该忽略它。
让我们回顾一下使用内嵌SVG图标的优点和缺点。
优势:
加载HTML文档不需要额外的加载时间。
没有额外的HTTP请求。
良好的可访问性支持，不需要额外的HTML元素。
在各种屏幕上都很好看
在风格选择方面是最好的
缺点:
复杂的HTML文档标记
难以管理和维护。
图标不会被缓存。
一些旧的浏览器不受支持
注意:一些框架使得管理和维护图标更加容易。例如，Webpack可以将“/path/中所有导入的MyIcon转换为/MyIcon。SVG”转换为生产版本中的内联SVG。所以对于dev，我们有一个简单的易于维护的标签。
图像元素中的SVG
我们可以将图标保留为单独的文件，并使用 < img > HTML 元素将其包含在我们的标记中，而不是在 HTML 中使用整个 SVG 标记。这使我们能够拥有一个简单的、可维护的标记和较小的文件大小。我们也可以为图标使用元素的本地可访问性特性。我们可以将图标保存为一个单独的文件，并使用< img > HTML元素将它包含在我们的标记中，而不是在HTML中使用整个SVG标记。这使我们能够有一个简单和可维护的标签和一个较小的文件大小。我们也可以使用图标元素的本地可访问性特性。
让我们以这种方式创建一个可访问的图标:
我们可以使用srcset实现旧浏览器的PNG回退:
支持srcset的浏览器也支持SVG元素，它们会自动加载SVG图像。不支持的浏览器会加载回PNG。
让我们回顾一下在图像元素中使用SVG的优缺点。
优势:
简单标记
带有alt标签的内置简单易用选项
良好的浏览器支持
图像文件大小可以优化。
图像文件可以被缓存。
缺点:
缺乏风格选择
图标的每个变体都应该放在一个单独的文件中。
每个图标都需要一个服务器请求。
