Iconize Textlinks with CSS

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 it's icon, kind of. 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 i already implemented:

Extensions

• .doc
• .txt
• .pdf
• .xls
• .xpi (Firefox Extension)
• .rss - .atom
• .opml
• .vcard
• .exe
• .dmg - .app
• .pps
• .ical
• .jpg - .gif - .png - .bmp
• .swf - .fla
• .css
• .zip - .rar - .gzip - .bzip

e-Mail/Messaging URI schemes

• mailto:
• callto:
• msnim:
• xmpp:
• aim:
• ICQ Link
• YIM! Link

Funky stuff...

• YouTube Movie
• Metacafe Movie
• sevenload Movie

• flickr Picture
• BubbleShare Picture
• Zooomr Picture
• sevenload Picture
• Wilson Blog
• SIC

Add it to your Website/Blog.

Upload the icons Folder to your Webspace and integrate the following code to your website:

<link rel="stylesheet" type="text/css" media="screen" href="iconize.css" />

Enjoy.

Compatibility

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