Html Twitter Bootstrap 的图标 <i ...> 如何工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10001575/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How does Twitter Bootstrap's icon <i ...> work?
提问by werdnanoslen
When placing an icon on a page, it seems that it somehow overrode the old, half-deprecated italics <i>tag to use as a special image tag. Either that or it makes me think <i ...>is a lazy interpretation of <img ...>.
在页面上放置图标时，它似乎以某种方式覆盖了旧的、半弃用的斜体<i>标签，用作特殊的图像标签。要么是这样，要么让我觉得<i ...>是对<img ...>.
How does this work when all it requires is a stylesheet, and can I override other tags for my own uses like this?
当它只需要一个样式表时，它是如何工作的，我可以像这样覆盖其他标签供我自己使用吗？
回答by Wesley Murch
Twitter bootstrap is just (ab)using empty <i>elements in their example markup for CSS Sprites. It doesn't matter which tag is used, but HTML5 did give <i>and <b>new lifeand semantic meaning:
Twitter bootstrap 只是 (ab)<i>在他们的CSS Sprites示例标记中使用空元素。不要紧，使用哪个标签，但HTML5便从<i>和<b>新的生活和语义：
http://www.w3.org/TR/html5/the-i-element.html
http://www.w3.org/TR/html5/the-i-element.html
The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name in Western texts.
i 元素代表一段文本，以另一种声音或语气，或以其他方式偏离正常散文，以指示不同质量的文本，例如分类名称、技术术语、来自另一种语言的惯用短语、思想，或西方文本中的船名。
Empty elements are always a sign of "less-than-perfectly-semantic" markup, but at the end of the day many people just use what gets the job done. The argument could be made that the icons are presentationand not content, so <img>may not be entirely appropriate and background images are better (plus less http requests).
空元素始终是“不完美语义”标记的标志，但在一天结束时，许多人只是使用完成工作的内容。可以认为图标是展示而不是内容，因此<img>可能并不完全合适，背景图像更好（加上更少的 http 请求）。
If you like to get real persnickety like I do from time to time, you could put some text in there:
如果你喜欢像我不时那样真正的挑剔，你可以在那里放一些文字：
<span class="icon icon-ok">OK</span>
Then style it with CSS to hide the text with something like text-indent:-999px(bootstrap probably already does this). So basically, it's just styled as a block element with a fixed height and width, with a background image.
然后使用 CSS 设置样式以使用类似的内容隐藏文本text-indent:-999px（引导程序可能已经这样做了）。所以基本上，它只是作为一个具有固定高度和宽度的块元素，带有背景图像。
回答by David Nguyen
[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;
}
you can see that the tag doesn't matter, they probably used ibecause well...it's deprecated. an image tag would not work in this case because they are using a sprite sheet...
您可以看到标签无关紧要，它们可能会被使用，i因为......它已被弃用。在这种情况下图像标签不起作用，因为他们使用的是精灵表......
.icon-glass {
background-position: 0 0;
}
回答by Esailija
The actual tag doesn't really matter, just the class. You could use <span class="icon-question-sign></span>or whatever.
实际的标签并不重要，只是类。你可以用<span class="icon-question-sign></span>什么的。
<i>is however shorter to write and ican stand for icon.
<i>但是写 起来更短，我可以代表图标。
回答by pixelator
The "i" tag is not shorthand for icon. It is used for italic text in HTML4 and has been given slightly different context in HTML5. Bootstrap have abused it and many developers too concerned with speed over quality or semantics similarly abuse it.
“i”标签不是图标的简写。它用于 HTML4 中的斜体文本，并且在 HTML5 中的上下文略有不同。Bootstrap 滥用了它，许多开发人员过于关注速度而不是质量或语义同样滥用它。
Empty tags are semantically wrong. i has nothing to do with icon.
空标签在语义上是错误的。我与图标无关。
PS using text indent to hide text is not accessible, so dont use it.
PS使用文本缩进隐藏文本是不可访问的，所以不要使用它。
回答by elclanrs
A tag is just that, a tag. You can use any tag for any purpose but usually you'd want to use semantically correct tags to represent different types of content. The <i>tag is not deprecated but barely used anymore so it's a safe tag for Twitter Boostrap to use for that purpose without worrying about getting overridden with something else.
标签就是这样，一个标签。您可以出于任何目的使用任何标签，但通常您希望使用语义正确的标签来表示不同类型的内容。该<i>标签没有被弃用，但几乎不再使用，因此它是 Twitter Boostrap 用于该目的的安全标签，而不必担心被其他东西覆盖。
