Is it right to use the <i> tag for icons and not italics?

Question

Currently we have noticed that many people have been using the tag <i> for icons and not for italics. If we were still in the pre-HTML5 era this would be totally wrong.

According to the specification of the tag <i> HTML5, now it is used for the text of an "alternate voice", such as transliterated foreign words, technical terms and typographies.

So if we use Icon Fonts, which are image typographies, the code will remain semantically correct, right?

Answer 1

In HTML4, the tag <i> meant italic. Over the past decade, the web standards movement has struggled for developers to separate style structure, which is the responsibility of CSS. But it would be difficult to remove this tag. Even if it were removed from the specification, no browser manufacturer in their right mind would eliminate the support, as this would break several existing websites. So they gave "a little twist": a new meaning for the element.

Translating from w3c Markup guide:

Element i represents an excerpt of text detached from its context without conveying additional emphasis or importance, and for which the presentation typographical convention is text in italics; for example, a term of a taxonomy, a technical term, an idiom of another language, a thought or the name of a ship.

It does not say whether or not it should be used for icons, as bootstrap does. In the field of semantic marking, there are always controversies.

Answer 2

Introducing

The first time I realized the use of tag <i></i> to apply icons, more properly those contained in a font (font), was through Bootstrap.

Some examples are the Fontawesome and the Glyphish that use fonts to provide icons.

I can’t say I agreed with the idea, but at the time, I wasn’t even out of line. It was a "victory" for them in terms of performance (performance):

• i as an icon abbreviation;
• tag with a super small size compared to other.

However, at present, even Bootstrap has left this practice and uses the tag <span></span> to display icons.

---

Officially

By what can be read on W3C website, the tag <i></i> has a well-defined objective:

Although Previous versions of HTML defined the i element only in presentational Terms, the element has now been Given the specific semantic purpose of Representing text "offset from its surrounding content without Conveying any extra emphasis or importance, and for which the Conventional typographic Presentation is Italic text".

Which translates into:

Although earlier versions of HTML have defined element i only in terms of presentation, the element now has a specific semantic purpose of representing text "displacement of its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographical presentation is italicized text ".

---

Answer to the question

So if we use Icon Fonts, which are image typographies, the code will remain semantically correct, right?

Technically there is no text inside the tag, so nothing will be read from it, what exists in the particular case of using this tag to display icons is a visual representation of an image that is being applied via CSS.

Semantically wrong because the tag is not representing text.

Answer 3

According to W3C, the tags <i> and <b> not necessarily used as Italic and Bold.

See a coherent explanation and I believe that you will know how to use the best way:

That other explains how you use for icons:

Answer 4

Semantically speaking, the tag <i> is used to represent text. If what we want to display is only an image and not text, then the tag <img> is best suited for this purpose. Normally icons appear in the document for the sake of presentation only, and therefore being a purely presentation artifact, should be inserted with CSS.

Of course this is all very nice in theory, but in practical terms <i> turns out to be handy for putting icons.

Answer 5

I’ve seen the use of <i> for icons, but I don’t consider semantics.

Icons do not fit the tag usage description <i>, therefore I still consider more appropriate the use of some element without semantic value. In this case the <span>

Answer 6

The ideal would be to put all the formatting in the CSS and leave only the basics in the HTML. Then italics would only be font:Italic And indicate icons.

Answer 7

The <em> applies text in phase (italics) in HTML5. But I think it’s easier for you to edit a <span> with the CSS, than using the tag. The <i> hasn’t been discontinued yet, I think it’s best to stop using it

Answer 8

According to W3C, the tag <i>, should be used to highlight part of the text inline (in the same line). The default is to format the text in italics.

Is being used to insert icons instead of tag <img> by pure typing economy and is not considered a good practice, because it does not improve the performance and confuses the understanding of the code.

Answer 9

The same is right to use for italic text, but I usually use to create icons on my websites.

Some tags I call universal tags, like span, Section and mainly the div tag, I use these tags for anything in html. It is not mandatory for you to follow the pattern, at the end you choose.