Font-awesome: That's not what the <i> tag is for
Love the library, but I feel it breaks the semantics of HTML. Specifically, the use of the tag:
"... 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”."
-- http://dev.w3.org/html5/markup/i.html
Now I realise the icons have all been done as part of a font, so it's probably churlish of me to suggest, but - wouldn't these be better served as images, in image tags, such that appropriate caching methods can be employed on them? Some mobile browsers can really choke on fonts.
arcwhite
All 10 comments
If you want to use images, make use of the twitter bootstrap glyphicons http://twitter.github.com/bootstrap/base-css.html#images...
The advantage of a icon-font is that you can change the size, color, apply a drop-shadow,...
That's the strength of Font-Awesome... so why change that!?
ThinkGraphical
on 26 Feb 2013
Yeah, I thought about it after I lodged this issue and I concede the point. Still not what is for semantically though (but then, what is!?)
Jeroen Dewaele [email protected] wrote:
If you want to use images, make use of the twitter bootstrap glyphicons http://twitter.github.com/bootstrap/base-css.html#images...
The advantage of a icon-font is that you can change the size, color, apply a drop-shadow,...
That's the strength of Font-Awesome... so why change that!?
—
Reply to this email directly or view it on GitHub.
arcwhite
on 26 Feb 2013
If you don't like the use of the <i> tag then there is nothing to stop you using a <span>. I personally prefer the <i> as it's shorter and the semantics of it are loosely defined in my opinion.
jjlharrison
on 26 Feb 2013
font-awesome is meant as replacement for glyphicons from twitter bootstrap, so redirect the question to bootstrap, as this framework is just a consistent extension. maybe the guys of bs can explain why they have chosen the <i>-tag.
KOTRET
on 4 Mar 2013
Discussion on the use of the <i> can be found at http://stackoverflow.com/questions/10001575/how-does-twitter-bootstraps-icon-i-work.
jjlharrison
on 4 Mar 2013
Bootstrap now suggests using <span> instead of <i> (finally!) https://getbootstrap.com/docs/3.4/components/#glyphicons-examples
This should be changed in font-awesome documentation as well. The <i> element semantic is well defined and it's not meant for icons.
mmiszy
on 15 May 2016
This should be changed in font-awesome documentation as well. element semantic is well defined and it's not meant for icons.
I agree with this and I'm personally using span for my projects.
I agree that docs should follow best practices, but Dave wants to keep the <i> tag.
This is also covered in the basic example
Ref #2451
tagliala
on 15 May 2016
<i class="fas fa-bars"></i> works for me, while <span class="fas fa-bars"></span> doesn't, using https://use.fontawesome.com/releases/v5.3.1/css/all.css. Has the support for span been removed? Thanks!
jonkri
on 8 Sep 2018
@jonkri that is not the case, please check your css and html markup.
https://jsfiddle.net/tagliala/j3gakye6/2/
If you think there is an issue with font awesome, please open a new issue following our bug report template and provide a reproducible test case
tagliala
on 8 Sep 2018
Thanks, @tagliala!
I found that the problem occurred due to me combining Font Awesome with a certain Bulma component:
jonkri
on 11 Sep 2018
Related issues
slayer925
·
179Comments
GabrielDelepine
·
202Comments
joefusaro
·
170Comments
Vilscon
·
178Comments
vivekagr
·
194Comments
Most helpful comment
Bootstrap now suggests using
<span>instead of<i>(finally!) https://getbootstrap.com/docs/3.4/components/#glyphicons-examplesThis should be changed in font-awesome documentation as well. The
<i>element semantic is well defined and it's not meant for icons.