File type icons on links using CSS

Hello,
In this post I would like to talk about how to add a filetype icon to a link. For example if I have a html tag with a link to a .pdf document I would like to show a PDF icon beside the link to inform the user that the link is a PDF document.

I have found out to do this by reading a section in a new book I have recently got my hands on, called CSS Mastery: Advanced Web Standards Solutions which mentions a topic on CSS attribute selectors. The short and informative article inspired me to look further into CSS atrribute selectors, where I came across this following article on how to add icons to links depending on the file type.

From this article I have managed to learn about CSS attribute selectors and I have decided to create my own test with fancier icons used from Fam Fam Fam.

Check my end result and view the source of the page to see how the results was achieved.

View example

I think this is nice code snippet and is interesting on how CSS can be used. If you have any questions or comments I would be happy to try and answer them.

6 comments

Sam Marks

23rd February, 2007

You a genius Wazza! good stuff..I like it.
Keep up the good work.

Sam

rdmey

07th January, 2008

If you’re looking for a way to do this that works with IE6, you can do it with Javascript. I’ve written about a way to do it with the jQuery library here:

http://blog.rebeccamurphey.com/2008/01/06/unobtrusive-cross-browser-add-filetype-icon-link-javascript-jquery/

Warren Buckley

Thank you Rdmey for the suggestion I have a post on my own blog talking about how it can be achieved with jQuery also.

http://www.creativewebspecialist.co.uk/2007/10/30/file-type-icons-on-links-using-css-revisited-using-jquery

Nuser

26th February, 2008

Appears that the jquery method only works if you have the application installed on the web server; otherwise a blank image will be displayed.

Hi Nuser the jQuery version works fine locally, the image paths are stored in the CSS file and obviously wont work unless you have the images downloaded in your local directory or altenatively use full paths to the icons.

eg:
http://www.creativewebspecialist.co.uk/jQuery_examples/filetype-links/Images/page_white_acrobat.png

I think I wasn’t clear in my earlier post. I’ve tried the jquery example on both a web server as well as a local pc. The local pc version works perfectly but I only have partial success with the server version. Only files with pdf extension has the image displayed correctly. I suspect this is because the web server does not have the extension registered as the applications (i.e. excel, word etc) were not installed.

p.s. the icons were downloaded and the required paths amended to point to the new location.