Doing all icons using CSS

Re: Doing all icons using CSS

by David Scotson -
Number of replies: 0

Icons accompanying a text link (either in the flow of text or in lists) should definately use this method.

I'm not so sure about stand alone icons with no accompanying text, as with this method there is no equivalent of the alt attribute text that gets substituted in non-visual browsers for img tags.

You might be able to do some variation of the Farhner Image Replacement technique to get the background image without text on visual browsers and vice-versa for non-visual browsers but a quick tour of the likely suspects shows no similar technique in use for small (e.g. 16x16 pixel) icons rather than larger header text images.

Actually, Doug Bowman of Stop Design uses such a thing for his permalinks (the little document icon next to the date under each story blurb). However, he uses display:none to hide the link text, which I believe is the primary reason that the FIR technique is considered inaccessible. Perhaps one of the other FIR variants that don't use display:none could be adopted e.g. some use margins to push text completely off the screen. These other techniques also dispense with the semantically useless extra span that the basic FIR introduces.

(Slightly off-topic: I'm not the world's biggest fan of using Flash for it's own sake, but when I discovered the FIR-related sIFR technique , I have to admit I thought the Flash wizards here at Moodle.org could create some really whizzy themes if that was supported in the XHTML)