Question

在开始之前，我读到了这个非常有用的问题，该问题列出了使用<img>和background-images的优缺点。 When to use IMG vs CSS

读完之后，我一直在考虑什么才是最有效的＆amp;显示图标的语义方式。另一个问题是，如果它有语义含义，例如警告图标，那么它应该显示为<img>，我认为在大多数情况下这是有道理的。但是，其他时间呢？

这是我见过图标的唯一其他方式：

在元素上有额外的填充（例如，锚点上的左侧填充为20px）
作为一个单独的元素（Facebook使用<i>标记，Google使用<span>标记

在某些情况下，使用额外的填充方法似乎没问题，但是如果元素的尺寸与图标不匹配，则可能会遇到在精灵地图中暴露其他图标的问题。

我猜测单独的元素图标方法可能是最安全的方法，但我不是百分之百确定它是否总是最好的方法来做它和使用什么元素（i，span ，其他？）

你的想法是什么？

Answer 1

这取决于具体情况，如果图标实际上是为了强调某些文字而设计的，那么你就将它包含在标签中，即

<em>Warning!</em>

您可以添加CSS样式以将图标显示为background-image。从技术上讲，您应该只使用<img>标签作为语义图像的项目，例如照片或图表。否则，对于标题或图标等内容，请务必更改background-image。

Answer 2

我喜欢将大部分图标保留为背景图像，并将文本从左侧填充以进行调整。当有需要注意的事情（例如警告）时，你几乎需要一个基于文本的方法来传达这些信息以便于访问，即使你找到了将它隐藏在CSS中的方法。

我反对使用跨度或其他元素，因为它不是语义而且它们不是必需的。

当我构建精灵时，我总是确保将所有图标保留在精灵的右边缘，这样他们就没有机会暴露流氓精灵（对于可变高度问题，你要么必须给它们充足的空间增长或将它们放在右下方。）

Answer 3

此article解决了这个问题。这是一个改编的摘要。

使用精灵和字体进行图标表示（vs img或其他内嵌图像插入技术）时，有两种可能的情况：

当图标用于增强文字时
当图标意味着独立并具有功能性或信息性时

案例（1）解决方案：

通过在大多数情况下显示图标来实现其目标，而不是将i标记用于错误的目的（语义）并且对屏幕阅读器不显眼。如果您愿意，可以使用class代替data-属性。

/* HTML */
<h2 id="stats">
  <span aria-hidden="true" data-icon="&#x21dd;"></span>
  Stats
</h2>

/* CSS */
[data-icon]:before {
  font-family: icons; /* or use background-image instead */
  content: attr(data-icon);
  speak: none;
}

案例（2）解决方案：

与以前类似的方法，但这里的图标将为屏幕阅读器提供后备解决方案。

/* HTML */
<a href="#rss" class="icon-alone">
  <span aria-hidden="true" data-icon="&#x25a8;"></span>
  <span class="screen-reader-text">RSS</span>
</a>

/* CSS */
.icon-alone {
  display: inline-block;
}
.screen-reader-text { /* Reusable */
  position: absolute;
  top: -9999px;
  left: -9999px;
}

要点：

语义正确
友好无障碍
未来证明（即使您更改了角色，也可以随时选择唯一的行）

Answer 4

我追求这个问题的方法是，将整个图标集保存在一个图像精灵中，然后根据需要调用每个图像。

例如：

Stackoverlow通过将所有图标保存在一个精灵中来做类似的事情：

http://sstatic.net/stackoverflow/img/sprites.png

然后，使用适当的background-position为每个图像定义类很简单，这样您也可以在语义上为每个图标设置appripriate填充和大小调整。

所有这些也确保更快加载图标。

什么是效率最高的＆amp;语义方式显示图标？

4 个答案: