15

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?

werdnanoslen
  • 102
  • 4
  • 7
  • 22

5 Answers5

19

Twitter bootstrap is just (ab)using empty <i> elements in their example markup for CSS Sprites. It doesn't matter which tag is used, but HTML5 did give <i> and <b> new life and semantic meaning:

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

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name in Western texts.

Empty elements are always a sign of "less-than-perfectly-semantic" markup, but at the end of the day many people just use what gets the job done. The argument could be made that the icons are presentation and not content, so <img> may not be entirely appropriate and background images are better (plus less http requests).

If you like to get real persnickety like I do from time to time, you could put some text in there:

<span class="icon icon-ok">OK</span>

Then style it with CSS to hide the text with something like text-indent:-999px (bootstrap probably already does this). So basically, it's just styled as a block element with a fixed height and width, with a background image.

Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
  • 3
    Just as a small reminder/warning: If I recall correctly, hiding text by any means might still be considered bad by search engines. If you want to add more meaning to an icon, you could for example use the title attribute or other accessibility options. – All Bits Equal Feb 27 '13 at 13:10
18
[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;
}
David Nguyen
  • 8,368
  • 2
  • 33
  • 49
  • 15
    I didn't think `i` was deprecated in HTML5? – Michael Dec 19 '12 at 23:14
  • 7
    `i` doesn't seem to be deprecated in HTML5, see http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html#the-i-element – romario333 Apr 03 '13 at 12:10
  • 1
    Sorry, you are right. It was not deprecated instead the use of changed. – David Nguyen May 07 '13 at 18:02
  • This answer is incorrect. `` is NOT deprecated, and its semantics is well defined. – Michał Miszczyszyn May 08 '19 at 11:07
  • @MichałMiszczyszyn, but that is not the question, and even OP describe the tag as " half-deprecated", which it is, nowadays you should use . So the answer is correct... – davidkonrad Dec 13 '22 at 23:25
  • @davidkonrad `i` is by no means deprecated. It's a valid and semantic element that "represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts." https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-i-element It's not meant for icons and, thus, this answer is incorrect. It's also not replaced by `` – it has different meaning. – Michał Miszczyszyn Dec 20 '22 at 10:38
  • @davidkonrad instead of snarky remarks, I'd appreciate if you could be more specific. What exactly do you think is incorrect in my comment? Sorry, I didn't understand the ultraviolet part but I think it was off-topic anyway. To the point: Is `` deprecated or _half deprecated_? No. It's an HTML element with specific semantic meaning. Was it replaced by ``? No. `` is another element with distinct semantic meaning. One does not replace the other or vice versa. Both should be used. Should `` it be used for icons? No, that's not what `` is meant for (see my previous comment). – Michał Miszczyszyn Dec 20 '22 at 14:44
1

The "i" tag is not shorthand for icon. It is used for italic text in HTML4 and has been given slightly different context in HTML5. Bootstrap have abused it and many developers too concerned with speed over quality or semantics similarly abuse it.

Empty tags are semantically wrong. i has nothing to do with icon.

PS using text indent to hide text is not accessible, so dont use it.

pixelator
  • 689
  • 1
  • 7
  • 12
-1

The actual tag doesn't really matter, just the class. You could use <span class="icon-question-sign></span> or whatever.

<i> is however shorter to write and i can stand for icon.

Esailija
  • 138,174
  • 23
  • 272
  • 326
-3

A tag is just that, a tag. You can use any tag for any purpose but usually you'd want to use semantically correct tags to represent different types of content. The <i> tag is not deprecated but barely used anymore so it's a safe tag for Twitter Boostrap to use for that purpose without worrying about getting overridden with something else.

elclanrs
  • 92,861
  • 21
  • 134
  • 171