Icons: use HTML or CSS?

Question

What is best practice for using icons?

Should I input in my html for the icons? Or should I be using CSS background?

Also, what if I want to specify both the image (transparent background) with other background colors (don't want to create new .png file each time).

Any help appreciated. Thanks!

possible duplicate of [When to use IMG vs. CSS background-image?](http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image) — FelipeAls, Sep 03 '12 at 02:26

score 2 · Answer 1 · answered Sep 03 '12 at 01:30

I prefer to use CSS backgrounds for icons - it also means I can use a sprite for all my icons, and position them appropriately for each instance, so less calls to the server.

If the same icon appears on different backgrounds, I will either create 2 sprites - 1 for light, and 1 for dark backgrounds, or you can use transparent PNG-24. This is a bigger file size, but the transparency has no matte, and thus works on all coloured backgrounds. Keep in mind IE6 does not support transparent PNGs, so you might need a fallback (if you care).

score 2 · Answer 2 · edited May 23 '17 at 11:59

Both: as for any image, it depends if this is an image that conveys information or a decorative image.

Image that conveys information

It MUST be an HTML image with a meaningful text alternative (ex: a link made of only this image. A link must never be empty so the image can't be a CSS one otherwise the link would be empty.

Decorative image

A background image or part of a sprite or a custom font character or an HTML image with empty alternative text (the latter if it's an image an author will only use once as decoration in content and that you won't add to the stylesheet)

Appropriate Use of Alternative Text (edit: by WebAIM)

edit: one case where the user won't see any image is if he uses High Contrast Mode. Then if he can't see any link in a menu made of large "icons" only with no text, that's bad. If he can't see bullets in front of link items but text of these links a re still very clear, then OK.
There are many other reasons why images wouldn't appear on a page whether it is flaky Wi-Fi, slow connection, cost on mobile, buggy proxy or parental controls, user decision, etc

score 2 · Answer 3 · answered Sep 03 '12 at 02:00

2

CSS is typically better because you can use CSS sprites and add hover effects. Plus, because you're using CSS, you simply need to add a class to an element and the sprite will appear, making this a much more flexible solution.

<span class="icon">Icon</span>

CSS:

.icon {
     background: (images/icon.png) 0 0 no-repeat;
     width: 25px;
     height: 25px;
     text-indent: -10000px; /* hides the text */
     display: inline-block; }
.icon:hover { background-position: 0 25px; }

The only time I'd recommend using an <img> over CSS is for your site's logo - CSS doesn't allow you to right click -> view image.

answered Sep 03 '12 at 02:00

Wex

15,539
10
64
107

1

Why would someone need to right click to view a particular image?? Plus Firefox allows you to right click -> View background image most of the time. A site logo should still be seen when for ANY reason images aren't loaded along with HTML and CSS. With HTML images, alternative text will still be displayed but text off viewport will remain invisible, that's why somebody should use HTML images in these cases IMO. – FelipeAls Sep 03 '12 at 02:05
@FelipeAlsacreations - I like your answer. – Wex Sep 03 '12 at 20:12

score 1 · Accepted Answer · answered Sep 03 '12 at 01:45

Use a vector file and store it in a typeface. this method scales for future unknown resolutions - like retina. besides icons should be vector drawn so it is an obvious step to keep them vector.

http://css-tricks.com/examples/IconFont/

http://www.webdesignerdepot.com/2012/01/how-to-make-your-own-icon-webfont/

Icons: use HTML or CSS?

4 Answers4