What is the preferred mechanism to use icons with button labels

Question

I have seen the following snippet of UI code to use icons with labels

<a href="">
    <img alt src="img/save.gif" class="icon">
    <span>Save</span>
</a>

OR

would it make sense to make combine this into a single entity (i.e. image icon plus the label).

My concern is if we choose a different theme (color scheme), then I will not be able to use different colors for my labels and might have to regenerate the image. Using the first approach gives me the flexibility to do so.

Answer 1

I dont know about the layout or the colors you are using but the following are my points:

1. Relative alignment between the image and the text can be difficult to acheive (with my basic HTML/CSS knowledge) when you have the two separately

2. You cay that you prefer to have them separate because you want the possibility to change the color of text during "color scheme changes". But are you sure you dont want to change the images as well (another set of icons)? You might have the same problem of color mismatches. (You might choose the icons in such a manner that they "go along" with all the color schemes of your site, then again you can choose the color of your labels in the same menner).

Again, I am not sure of the layout/colors you are choosing, so the definitive answer is (as always) "depends on your site"

Answer 2

Consider hyperlink cues for common link icons. For example:

html

<a href="files/holidays.pdf">View Holidays</a>

CSS

a[href $='.pdf'] { 
       padding-right: 18px;
       background: transparent url(icon_pdf.gif) no-repeat center right;
    }

Styling of each can be handled in CSS. Works for just about every file type extension out there. This might not work for your specific example (would have to see the larger context) but it's a great trick for download links, etc.