New on LowEndTalk? Please Register and read our Community Rules.
All new Registrations are manually reviewed and approved, so a short delay after registration may occur before your account becomes active.
All new Registrations are manually reviewed and approved, so a short delay after registration may occur before your account becomes active.
[i] vs. [span] for icons.
I see people everywhere using the <i> tag for icons, as in:
<i class="fa '.$icon.'"></i>
I personally think this is really sloppy and a horrifying example of "who cares what's underneath, as long as it works?" Personally, I always use <span>, which feels much more appropriate.
Anyway, what does LET use?
Comments
mostly 'i', cuz as u said, who cares.
i for icon
Francisco
I'd use span but a lot of my background is in making websites accessible for those with impairments (particularly visual impairments), so I'm used to making sure my HTML used correctly.
Tl;dr: neither, you should use the
img
element.We should care about a more semantic web, make sure that people with impairments are able to use our sites (accessibility), and build documents that are standard compliant and future proof. The W3C standard for the
i
element says:So, the
i
element wasn't meant to be used to show icons: it's a element on the text level semantics for HTML. The same can be said about thespan
element, it's a text level element and should not be used to show anything that isn't text. The standard for this element says:So, the
span
element was meant to be used as a children element for other texts elements when you need different attributes on specific parts of the content of a parent element.On the other hand, the HTML5 standard do preconize a way to show icons and it's using the
img
tag. The standard defines a icon as:And put some conditions to show icons:
When an icon conveys additional information not available in text, provide a text alternative.
Use an empty alt attribute when an icon is supplemental to text conveying the same meaning. Where images are used in this way, it would also be appropriate to add the image using CSS.
Always remembering that:
Please, refer to the standard to see examples of the above mentioned conditions, as LET posting with HTML is broken.
@EkaatyLinux but how about font-icons?
There is no perfectly standardized semantic for it by now. But refer to this article to see a approach that uses most semantic HTML and provide a very good solution for screen readers.
https://speakerdeck.com/ninjanails/death-to-icon-fonts
I use svg
I do agree that using SVG is a good approach, but I see some people using it without providing a way for a screen reader to be able to describe the idea behind the icon when it appears without a describing text element. Using a
figure
element and a hiddenfigcaption
would make using SVG a perfectly semantic option to icons.TIL.
I always thought it meant italicize.
Here I was ready to criticize you for being pedantic, but I recant because that CSS Tricks article is genuinely good. Thanks for sharing!
Browsers will print italicized text to semiotically indicates what the standard declares just because this is the historical way of building the required emphasis, but a browser can choose other ways to indicate this emphasis.
Can you share with me why you thought that I was being pedantic? I would appreciate it.
Mostly for just pushing the use of
img
for icons, meanwhile things like Bootstrap usei
for their web fonts--so in reality anything will work for just about anything. But the article referenced had some good arguments for how to embed icons, including web fonts. So in the end I decided I agree with you.Thank you for your feedback. I just want to make a comment on the use of
i
by Bootstrap.Bootstrap was preconizing the use of the
i
tag on their version 2, but after the version 3 launch they started to preconize the use ofspan
for icons, as you can see on the official documentation.The reason for this is that using
i
orspan
to show font-icons will provide a perfomance gain because browsers will always make a request to the server when they see aimg
element even if thesrc
attribute is empty, what doesn't makes sense if you are using font-icons.Well, at the end of the day, acessibility, linked data, etc; all depends on a semantic web. Write HTML pages that are standard compliant is better for all of us. It's not about being pedantic, it's about making a better www.
It did in earlier versions of HTML (before anyone really gave two shits about the semantic web). If I remember correctly, the tag was deprecated in favour of
<em>
in HTML 4, but that was reversed in HTML 5 and it was given a new meaning.I have always seen it as for icons. Only recently I've started seeing used. Does it make any difference? Perhaps with some browsers, new and old?