Creative Web Specialist - An online portfolio and resource site of Warren Buckley

Latest Posts

Feb23th

File type icons on links using CSS

Author
Warren Buckley
Categories
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
07th January, 2008
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.
Warren Buckley
26th February, 2008
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
Nuser
26th February, 2008
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.
Post a comment »

Comment's have been disabled, due to getting hit badly with comment form spam

Categories

Recently

Categories

Monthly Archives

My Skill Set

This is a quick list of my skill set to date

  • XHTML
  • CSS
  • Photoshop (Slicing)
  • XSLT
  • ASP.NET
  • Umbraco .NET CMS

My Links

Umbraco
Xeed
Profiles

My del.icio.us

My Last.FM

I am listening to:

  • Ain't Pretending by CowbellOh Girl29 Jul 2010, 10:37
  • Just Want Your Love by CowbellOh Girl29 Jul 2010, 10:33
  • Oh Girl by CowbellOh Girl29 Jul 2010, 10:31
Warren Buckley is an umbraco MVP 2008/2009 Warren Buckley is an umbraco level 1 certified developer

Photo of Warren Buckley Warren Buckley is a Creative Web Specialist based in Leigh on Sea, Essex , UK.