Twitter Bootstrap的图标< i ...>工作？ [英] How does Twitter Bootstrap's icon <i ...> work?

问题描述

在页面上放置图标时，似乎以某种方式覆盖旧的，已弃用的斜体< i> 标签用作特殊图像标签。或者它让我认为< i ...> 是一个惰性解释< img ...> 。

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 ...>.

当所有需要的都是样式表时，它是如何工作的，我可以覆盖其他标签，像我这样使用？

How does this work when all it requires is a stylesheet, and can I override other tags for my own uses like this?

推荐答案

[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 因为很好...它已被弃用。在这种情况下图像标签不会工作，因为他们正在使用精灵表...

you can see that the tag doesn't matter, they probably used i because well...it's deprecated. an image tag would not work in this case because they are using a sprite sheet...

.icon-glass {
  background-position: 0      0;
}

这篇关于Twitter Bootstrap的图标< i ...>工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！