Question

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

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

Answer 1

Twitter引导程序只是（ab）在CSS Sprites的示例标记中使用空个元素。使用哪个标记无关紧要，但HTML5确实提供了和 new life以及语义含义：

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

i元素代表一个交替的声音或心情的文本范围，或者以指示不同文本质量的方式偏离正常散文，例如分类标识，技术术语，来自另一个的惯用短语西方文本中的语言，思想或船名。

空元素总是“低于完美语义”标记的标志，但在一天结束时，许多人只是使用完成工作的东西。可以认为图标是表示而不是内容，因此<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;
}

Answer 3

实际标签并不重要，只是课程。您可以使用或其他任何内容。

然而，

写得更短，我可以代表图标。

Answer 4

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

空标记在语义上是错误的。我与icon无关。

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

Answer 5

标签只是一个标签。您可以出于任何目的使用任何标记，但通常您希望使用语义正确的标记来表示不同类型的内容。 标记不会被弃用，但几乎不再使用，因此它是Twitter Boostrap用于此目的的安全标记，而不必担心被其他内容覆盖。

Twitter Bootstrap的图标<i ... =“”>如何工作？</i>

5 个答案: