Question

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?

Answer 1

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