Twitter Bootstrap的图标<i ...>如何工作？

Question

当在页面上放置一个图标时,它似乎以某种方式覆盖旧的,半弃用的斜体<i>标记以用作特殊图像标记.无论是那个还是它让我觉得<i ...>是一种懒惰的解释<img ...>.

当它需要的是一个样式表时,它是如何工作的,我可以覆盖我自己使用的其他标签吗？

Answer 1

Twitter引导程序只是(ab)<i>在CSS Sprites的示例标记中使用空元素.不要紧,使用哪个标签,但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(类似于bootstrap).所以基本上,它只是一个具有固定高度和宽度的块元素,带有背景图像.

Answer 2

[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;
}