How does Twitter Bootstrap's icon <i ...> work?

css, html, twitter-bootstrap

Solution

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

Problem

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?

Original source

Related problems