15
4

5 回答 5

18

Twitter bootstrap 只是（ab）在他们的CSS Sprites<i>示例标记中使用空元素。使用哪个标签并不重要，但 HTML5 确实赋予了新的生命和语义含义：<i><b>

http://www.w3.org/TR/html5/the-i-element.html

i 元素表示一段文本以另一种语音或语气，或以其他方式偏离正常散文以指示不同质量的文本，例如分类名称、技术术语、来自另一种语言的惯用短语、a思想，或西方文本中的船名。

空元素始终是“语义不够完美”标记的标志，但归根结底，许多人只是使用完成工作的东西。可以说图标是演示而不是内容，因此<img>可能不完全合适，背景图像更好（加上更少的 http 请求）。

如果你喜欢像我时常做的那样挑剔，你可以在里面放一些文字：

<span class="icon icon-ok">OK</span>

然后用 CSS 设置样式以隐藏文本text-indent:-999px（引导程序可能已经这样做了）。所以基本上，它只是被设计为一个具有固定高度和宽度的块元素，并带有背景图像。

于 2012-04-03T21:29:05.373 回答
17 
[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("../img/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
  *margin-right: .3em;
}

你可以看到标签无关紧要，他们可能使用了i，因为好吧......它已被弃用。在这种情况下，图像标签将不起作用，因为它们使用的是精灵表......

.icon-glass {
  background-position: 0      0;
}
于 2012-04-03T21:27:01.567 回答
0

实际的标签并不重要，只是类。你可以使用<span class="icon-question-sign></span>什么的。

<i>但是写起来更短，我 可以代表图标。

于 2012-04-03T21:25:47.400 回答
0

“i”标签不是图标的简写。它用于 HTML4 中的斜体文本，并且在 HTML5 中给出了稍微不同的上下文。Bootstrap 滥用了它，许多过于关注速度而不是质量或语义的开发人员同样滥用它。

空标签在语义上是错误的。我与图标无关。

PS 使用文本缩进隐藏文本是不可访问的，所以不要使用它。

于 2013-11-06T17:08:32.103 回答
-3

标签就是这样，一个标签。您可以将任何标签用于任何目的，但通常您希望使用语义正确的标签来表示不同类型的内容。该<i>标签并未被弃用，但几乎不再使用，因此它是 Twitter Boostrap 用于该目的的安全标签，无需担心被其他内容覆盖。

于 2012-04-03T21:25:48.440 回答