在页面上放置图标时，它似乎以某种方式覆盖了旧的、已被半弃用的斜体 <i> 标记以用作特殊图像标记。要么，要么让我觉得<i ...> 是对<img ...> 的懒惰解释。
当它只需要一个样式表时，它是如何工作的，我可以像这样覆盖其他标签以供我自己使用吗？
【问题讨论】：
标签： html css twitter-bootstrap
Twitter bootstrap 只是（ab）在 CSS Sprites 的示例标记中使用空的 <i> 元素。使用哪个标签无关紧要，但HTML5确实给出了<i>和<b>new life和语义含义：
http://www.w3.org/TR/html5/the-i-element.html
i 元素代表一段文本以另一种语音或语气，或以其他方式偏离正常散文，以指示不同质量的文本，例如分类名称、技术术语、与另一个不同的惯用短语西方文本中的语言、思想或船名。
空元素始终是“不完美语义”标记的标志，但归根结底，许多人只是使用完成工作的东西。可以说图标是 presentation 而不是 content，因此 <img> 可能并不完全合适，背景图像更好（加上更少的 http 请求）。
如果你喜欢像我时常做的那样挑剔，你可以在里面放一些文字：
<span class="icon icon-ok">OK</span>
然后用 CSS 设置它的样式，用 text-indent:-999px 之类的东西隐藏文本（bootstrap 可能已经这样做了）。所以基本上，它只是作为一个块元素的样式，具有固定的高度和宽度，并带有背景图像。
【讨论】：
[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;
}
【讨论】：
i 在 HTML5 中没有被弃用？
i 在 HTML5 中似乎没有被弃用，请参阅 w3.org/html/wg/drafts/html/master/…
<i> 未被弃用，其语义定义明确。
实际的标签并不重要，只是类。你可以使用<span class="icon-question-sign></span> 或其他。
<i> 但是写起来更短，i 可以代表图标。
【讨论】：
<a>,<div>,<p>...）。 <i> 推断出语义意义，而标志性使用并不特别适合，所以我不明白为什么应该使用 <i> 而不是 <span>，因为这样更容易打字。在代码可移植性方面，<i> 并不常见，因此只有潜入 Twitter Bootstrap 或拥有可能无法验证的代码。
“i”标签不是图标的简写。它用于 HTML4 中的斜体文本，并且在 HTML5 中给出了稍微不同的上下文。 Bootstrap 滥用了它，许多过于关注速度而不是质量或语义的开发人员同样滥用了它。
空标签在语义上是错误的。 i 与图标无关。
PS 使用文本缩进隐藏文本是不可访问的，所以不要使用它。
【讨论】：
标签就是这样，一个标签。您可以将任何标签用于任何目的，但通常您希望使用语义正确的标签来表示不同类型的内容。 <i> 标签并未被弃用，但几乎不再使用，因此它是 Twitter Boostrap 用于此目的的安全标签，无需担心被其他内容覆盖。
【讨论】：