arnklint Challenges, overcomings, thoughts and inspiration.

File Type Icons for Links with CSS

First of all, there is a github repo which I’m referring mostly referring to down below. There is all you need to install this CSS module.

This is a “plugin” essentially consisting of an image (a sprite image) and a stylesheet for you to add nice little icons to the right of hyperlinks that lead to a file with a certain extension. Like my non-existing pdf-file for example. ## Installation For production, simply use the hyperlink_icons.css as a stylesheet and make sure that it is referencing the sprite.gif image correctly. This should make links look like the examples below:


e-Mail/Messaging URI schemes


This CSS module has been successfully tested in

  • Firefox (Mac & PC)
  • Camino
  • Safari
  • Opera (Mac & PC)
  • Internet Explorer 7 (6 doesn’t work)

Icons by famfamfam

This work is licensed under a Creative Commons Attribution License.