Abstract

Following a discussion in UNWA about placing icons next to links for content in different formats, one possible solution is below. It uses a background image for the anchor, with a class on the anchor to know which background to put in. It then adds a padding to the left, just slightly bigger than the image, to move the hypertext out of the way. Text that follows hypertext flows as per normal.

Example

This line contains some text and links. See the information in PDF, Word or even Excel formats.

Code

(X)HTML

[html]
<p>This line contains some text and links. See the information in
<a href=”#” title=”Information in PDF” class=”pdf”><abbr title=”Portable Document Format”>PDF</abbr></a>,
<a href=”#” title=”Information in Microsoft Word format” class=”word”>Word</a> or
even <a href=”#” title=”Information in Microsoft Excel format” class=”excel”>Excel</a>
formats.</p>
[/html]

CSS

[css]
a.pdf {
background: url(/images/pdf.gif) no-repeat left center;
padding-left: 20px;
}
a.word {
background: url(/images/word.jpg) no-repeat left center;
padding-left: 20px;
}
a.excel {
background: url(/images/excel.gif) no-repeat left center;
padding-left: 20px;
}[/css]

Conclusion

An elegant solution, that degrades gracefully (those that don’t support CSS/have CSS enabled still see the normal text), works well/degrades well in Internet Explorer 6+, Opera 8.54+, Firefox 1.5+, Lynx and even Netscape 4, uses less code than other solutions, is easy to re-use, and overall a good example of CSS enhancing the experience for those that use/support it.
One drawback is that those with images disabled, but CSS enabled will see a gap where the icon should be. A second drawback is that the background image does not scale with the text, if resized within the browser. Both I would consider acceptable given the advantages it has over other solutions.
This method can be improved by using CSS Sprites. Instead of loading lots of small images, with all the overhead it creates, you create and load one image of all the small images together, then show the correct one by using the background-position property.