Why using with Font Awesome more semantically correct than ?

Question

I've been using Font Awesome for a while and I wonder one thing which tag should I use for it.

Here is said that they like the  tag for brevity, but using a  is more semantically correct.

I read specification for  and . Unfortunately, I can't find the difference, they're both have the same context in which they can be used.

Read this http://stackoverflow.com/questions/11135261/should-i-use-i-tag-for-icons-instead-of-span — elad.chen, Sep 30 '15 at 06:26

score 5 · Accepted Answer · edited Mar 11 '18 at 17:16

5

The difference between  and  is that  was originally intended for italics font, while  is intended to encapsulate a piece of content without changing any css rules immediately. In other words,  can be used for any custom css action you want to apply.

Therefore, from a theoretical and historical perspective,  would be a more proper choice.

However,  is much shorter and the effect in the browser is identical, so choose  in order to optimize your page speed with a few microseconds, and your coding speed with a few seconds.

edited Mar 11 '18 at 17:16

Yennefer

5,704
7
31
44

answered Sep 30 '15 at 06:30

Niki van Stein

10,564
3
29
62

1

From the Font Awesome site: [https://fontawesome.com/how-to-use/web-fonts-with-css] **Basic Use** You can place Font Awesome icons just about anywhere using a CSS style prefix and the icon’s name. Font Awesome is designed to be used with inline elements (we like the tag for brevity, but using a is more semantically correct). – brandonbradley Mar 02 '18 at 21:47

score 3 · Answer 2 · answered Sep 30 '15 at 06:28

3

It is because  is for italic text in html and  can contain any inline element. Thus using span instead of i is more semantically correct. But still  is also not denoting for using icons in html, so this is also not more semantically correct until you add a role as img like this:

<span class="your_awesome_font_icon" role="img"></span>

answered Sep 30 '15 at 06:28

Bhojendra Rauniyar

83,432
35
168
231

1

Specification has a note about it: Style sheets can be used to format i elements, just like any other element can be restyled. Thus, it is not the case that content in i elements will necessarily be italicized. – Dmytro G. Sergiienko Sep 30 '15 at 06:33
But talking semantically we would just see html not css. Also note, google search engine works with html only not css. – Bhojendra Rauniyar Sep 30 '15 at 06:34
1

Thank you. I like your idea using with role='img'. I've never heard about it. – Dmytro G. Sergiienko Sep 30 '15 at 06:39

Why using with Font Awesome more semantically correct than ?

2 Answers2