Hi, this is your host Michał Rudnicki short "stronger", and Ye are visiting my jagged border of life and work. Have a nice read, and please feel free to drop me a line or twelve.
Since this is a tri-lingual blog you may find it useful to filter it out by: english | polish | php-ish

Unobtrusive CSS icons

27 Jul 2010

There can't be anything more straightforward than displaying icons beside links/buttons, can it? After all it's just a CSS class for generic icon with background-image inline style. Or maybe separate CSS class for each icon? After all, there's only so many of them. Or even partial view that takes image, caption, and link as parameters and spits out complete piece of HTML?

None of the above. They all suck due to either inherent ugliness, annoing restrictions, or lack of simplicity. All fail programmers' ultimate criterion – <blink>elegance</blink>. But there is one that excels where others fall short.

Enter convention

<style type="text/css">
.icon { padding: 0 0 0 20px; background: transparent left center no-repeat }
</style>

<a href="#" class="icon i-add">Add</a>
<a href="#" class="icon i-edit">Edit</a>
<a href="#" class="icon i-delete">Delete</a>

A convention whereby all elements with class icon i-something are transformed so that i-something part becomes background-image: url(/icons/something.png).
Nothing can be easier with jQuery.

$(".icon").each(function (i, e) {
	var icon = e.className.replace(/.*i-/, '');
	e.style.backgroundImage = 'url(/icons/' + icon + '.png)';
});

• Clean - no inline CSS clutter.
• Simple - completely flat learning curve.
• Powerful - no need to define separate CSS class for each icon.

Note: make sure your web server has no alias set for path /icons/ or you won't see any icons.

11 comments | permalink | trackback | rss