The Best Way to Add Icons

With my work on qublog.net continuing to progress toward hosting this service on the qublog.net web site. I’ve been using the silk icon set for the icons, but recently decided to switch over to the fugue icons. In the process, I rethought how I added icons to the system, which I subsequently chose to try on some work things as well. There’s no magic here, nothing to patent (at least I hope not), but it’s worked pretty well, so I’ll share. I suppose this might not be “The Best Way”, but it’s certainly now “My Best Way.”

First, these icons are all being added without IMG-tags. This keeps my content less cluttered and allows me to very quickly switch icons if I change my mind later just be changing my stylesheet. Typically, these are added to buttons, links, and spans like so:

<span class="icon o-time">12:44 PM</span>
<a class="icon v-add o-task">Create Task</a>
<input type="submit" class="icon v-save o-time" name="op" value="Save"/>

The first class “icon” performs the work of making sure the icon itself is attached to the element properly. This looks like:

.icon {
    padding-left: 18px;
    background-repeat: no-repeat;
    background-position: 1px 1px;
    min-height: 18px;
}

This basically makes sure that my 16 pixel icon has 1 pixel of space around it and makes sure the element is at least tall enough not to cut anything off.

Then, the icon itself is chosen by examining the other associated classes. I’ve divided the classes into nouns (with an “o-” prefix), adjectives (with an “a-” prefix), verbs (with a “v-” prefix), and adverbs (with a “r-” prefix). I define these classes within the style sheet in that order so that adjectives will override nouns, verbs override both nouns and adjectives, and adverbs will override everything. So, now my style sheet looks something like this:

.o-task { background-image: url(ticket.png) }
.o-time { background-image: url(clock.png) }

.a-group { background-image: url(folder.png) }
.o-task.a-project { background-image: url(briefcase.png) }

.v-add { background-image: url(plus.png) }
.v-add.o-task { background-image: url(ticket__plus.png) }
.v-add.o-task.a-project { background-image: url(briefcase__plus.png) }

By setting up the style sheet this way, a regular task reference shows up with a ticket icon. However, a project (which is a kind of task in Qublog) shows up as a briefcase. In case I need a generic add link, I can use a lone plus sign, but if I want a specific add link for tasks I can have a ticket with a plus sign. Finally, I can add a new project with a briefcase with a plus sign.

Later, if I want to modify the icons used, I can do so by just adding another class or something. It’s pretty flexible and if I make sure and include enough information on every link, span, or button that might have icon, I can make my icons more or less particular later just be adding a line or two to my style sheet. (For example, if my icon set lacked a briefcase with a plus next to it and then added one or I created one, then I could add that last rule later and rely on the ticket with a plus sign in the meantime.)

Some final varations I also use are things like having the icon only and ignoring the text itself:

.icon.only {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 0;
}

Now I can add the “only” class to my spans and links and the text becomes hidden. I combine this with a jQuery code similar to this:

jQuery(document).ready(function() { 
    jQuery('.icon.only').each(function(){
        jQuery(this).attr('title', jQuery(this).text());
    });
});

This causes the text of the element itself to show up as a tooltip when you hover your mouse over the icon. Generally speaking, though, I usually try to do this on the server side when I use the “icon only” classes.

I have a few other “icon” class variants for changing the position of the icon, dealing with small 9-pixel icons, and making sure buttons and specific other things look good with the icons, but I’ll leave these as exercises for the reader.

Cheers.