[chrismbarr]

Attributes can be added to make screen readers ignore certain html elements like icons for exactly this reason.

    <i class="fa fa-pizza" aria-hidden="true"></i>

[cloverich]

This is a good point. There is additionally ligatures used by the Google material icons. These let you put an actual textual representation of the icon and only replace it with an icon if the browser supports it: http://google.github.io/material-design-icons/

[vanadium]

Why FA insists on abusing the Italics tag (repurposing it as "Icon") instead of leveraging the appropriate <span> is...specious at best.

[dragonwriter]

The <i> tag in modern HTML does not mean "italics", though the examples given to illustrate its new semantics are all things conventionally set in italics.

"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, transliteration, a thought, or a ship name in Western texts." [0]

Its use for text-as-icon is arguably, despite obviously not being a use classically set in italics, within the defined semantics of the <i> tag.

EDIT: Though FAs use isn't actually text-as-icon, it uses empty tag as an icon. That's not consistent with the semantics of the tag.

[0] https://html.spec.whatwg.org/multipage/semantics.html#the-i-...

[albedoa]

<i> is not the "Italics tag":

In earlier versions of the HTML specification, the <i> tag was merely a presentational element used to display text in italics, much like the <b> tag was used to display text in bold letters. This is no longer true, as these tags now define semantics rather than typographic appearance.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i

[Scottopherson]

You can use whatever <element> you want with FA. It's the class names that are important.

[zeveb]

Or, y'know, one could just use an image instead of abusing HTML:

    <img src="pizza.png" alt="" />

[et-al]

Except that would require multiple web requests unless you were using an image sprite. Font Awesome and Glyphicons solve this by using a font file or sprite.

I do wish they didn't overwrite the traditional <i> tag, but I guess we're supposed to be using <em> for semantic HTML.

[zeveb]

> Except that would require multiple web requests unless you were using an image sprite.

So … it can be made to work with a single request then.

[et-al]

Yup, and Glyphicons does that.