Iconize Textlinks with CSS

Where will this link take me?

Links are fun, but sometimes we don't know where they take us. With this little CSS technique a user can identify a link by its icon. This whole thing was inspired by the "Showing Hyperlink Cues with CSS" article of Ask the CSS Guy.

The idea is pretty simple, if a link points to a .pdf file, we show the .pdf icon after the link.
Here are some more examples which are already implemented:


Version 0.5
01/04/08 - Added ".phps", ".torrent" & "gg:"
04/07/07 - Added "skype:" icon
01/28/07 - New icons & changed CSS padding
01/26/07 - Added "Archive" icon

Download / How to

Download the .zip file, upload the CSS and the icons to your webspace and integrate the CSS in your website, blog or whatever. Done.
You can easily replace the icons or add more extensions and sites. Enjoy!




The CSS technique has been successfully tested with:
Firefox (Mac & PC), Camino, Safari, Opera (Mac & PC) & Internet Explorer 7 (6 doesn't work)

The MSN, AIM, ICQ, YIM!, Skype & Gadu-Gadu logos are trademarks of their respective owners.