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.

Update: Since we experimented a lot with text links in the last time, we had to find a way to keep track of all of them. So we build a „little“ tool to manage our text links. If you want to store and automatically monitor all of your backlinks as well, check out our Linkmotor.

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.