How to add file type Icons to Links with CSS | Psyked

Loading ...

Auto-matic Link Icons

Posted by James - 10/07/07 at 06:07:17 pm

CSS 2.1 has many new wonderful capabilities, and I’m going to show you one of my latest tricks I’ve picked up – automatic link icons.

First, a look at the end result :-

This is a normal link.

This is an external link.

This is a link to a MS Word document.

This is a .zip file.

(don’t bother clicking the links though – they’re empty)

Now, you may have seen similar things on a few websites already, wikipedia certainly makes use of the technique to highlight external links. The astute of you may notice that the ‘external’ link isn’t actually external – think of it more as ‘absolute’. How do we achieve these results automatically? Well, that’s with the power of the new CSS selectors. 456BereaSt. has a nice article on them, but the stuff we’re concerned with is the attribute selectors.

Attribute selectors are done with [square brackets], and can include simple conditional statements, with some options for wildcards thrown in to boot. The easiest way for me to explain is to show you…

Here’s a simple ‘absolute’ link selector – a[href="http:"] – this will target all the ‘a’ tags, with the attribute ‘href’ which is equal to “http:”. Interesting, but its not very useful, because the attribute would need to be exactly “http:” for it to work. So, we add the ^ operator, which means ’starts with’. So ( a[href^="http:"] ) means any link with a href attribute that starts with ‘http:’ – thus, every external link.

Another operator we can use is $, which means ‘ends with’. So a[href$='.pdf'] is any links that end with .pdf. Now we know how to automatically treat different links differently. Oh, and it works fine in all the most recent browsers (IE7, Firefox) And won’t have any effect on browsers that don’t understand the selectors, so its safe to use.

Now, styling the links is really a matter of personal preference, (and your design), but I the infamous famfamfam silk icon set will help you out here. Once you’ve got your icons, a little clever implimentation of styles will enable you to indent your link slightly to add you icon in as a background image. Thus;

a[href$='.pdf'] { display:inline-block; padding-left:20px; line-height:18px; background:transparent url(Images/PDFIcon.gif) center left no-repeat; }

And you’re away – limited only by your icon supply, and the volume of conditional statements you want to make! Here’s mine – covering external links, mailto links, and common document formats…

a[href^="http:"] { display:inline-block; padding-right:14px; background:transparent url(/Images/ExternalLink.gif) center right no-repeat; }

a[href^="mailto:"] { display:inline-block; padding-left:20px; line-height:18px; background:transparent url(/Images/MailTo.gif) center left no-repeat; }

a[href$='.pdf'] { display:inline-block; padding-left:20px; line-height:18px; background:transparent url(/Images/PDFIcon.gif) center left no-repeat; }

a[href$='.swf'], a[href$='.fla'], a[href$='.swd'] { display:inline-block; padding-left:20px; line-height:18px; background:transparent url(/Images/FlashIcon.gif) center left no-repeat; }

a[href$='.xls'], a[href$='.csv'], a[href$='.xlt'], a[href$='.xlw'] { display:inline-block; padding-left:20px; line-height:18px; background:transparent url(/Images/ExcelIcon.gif) center left no-repeat; }

a[href$='.ppt'], a[href$='.pps'] { display:inline-block; padding-left:20px; line-height:18px; background:transparent url(/Images/PowerPointIcon.gif) center left no-repeat; }

a[href$='.doc'], a[href$='.rtf'], a[href$='.txt'], a[href$='.wps'] { display:inline-block; padding-left:20px; line-height:18px; background:transparent url(/Images/WordDocIcon.gif) center left no-repeat; }

a[href$='.zip'], a[href$='.gzip'], a[href$='.rar'] { display:inline-block; padding-left:20px; line-height:18px; background:transparent url(/Images/ZIPIcon.gif) center left no-repeat; }

Posted by James Ford

Full profile: http://www.psyked.co.uk

July 10, 2007 | In CSS | 60 Comments

60 Comments »

Very nice tip James! I’ve bookmarked this one. It’s one of those nice little tricks that will display as intended in all modern browsers, and gracefully degrade in IE 6.

Comment by Jonathan Nicol — 18 July 2007 #
Glad it helps!

In the event that you’ve requirements that can’t be met like this – or you need more compatability with older browsers, you can always take the base CSS that generates the iconified effect, and apply it manually as ‘normal’ styles.

Comment by James — 19 July 2007 #
Great article—I’ll use it on my blog!

Comment by Pensador — 19 July 2007 #
谢谢。

Comment by 超 — 22 July 2007 #
test: http://www.google.hu/test.zip

Comment by kisPocok — 2 August 2007 #
Hey hey, it works! An interesting effect though with the combination of external linked files… I wonder wether I can find a fix for that…

Comment by James — 2 August 2007 #
Hmm, I bet the external link+file type issue could be fixed with the :before and :after selectors?

Comment by James — 3 August 2007 #
Nope… I was wrong. I guess that external link icons need a little more thought…

Comment by James — 9 August 2007 #
Im a bit new to css but would a roll over effect still work on image backgrounds using your automated stylesheet if used

a:hover [href$='.doc']

?????

Comment by john — 23 August 2007 #
That’s really dependant on your setup – Elements can only have one image background. So, if your links elements already have a background image either of the CSS styles could be overwritten.

If however, the parent element of your link has the background image, they should both display their respective backgrounds.

Does that help?

Comment by James — 23 August 2007 #
hello

i have an idea …

add Internet explorer icon to the normal links

Comment by Hajcc — 14 October 2007 #
Indeed – adding an Internet Explorer Icon for .htm pages is possible, and I’ve seen it on other websites, like those created in Sharepoint Server (Microsofts’) – but I decided to steer clear of it, so-as not to offend users of other browsers.

It does however, give me another idea…

Combine this CSS with another script – such as the css browser selector, and you can tailor the .htm icons to your visitors browser… i like it.

Comment by James — 15 October 2007 #
Good read

Comment by Website Design Belfast — 4 November 2007 #
In Dreamweaver CS3 the CSS code;

a[href$='.pdf'] {
display:inline-block;
padding-left:20px;
line-height:18px;
background:transparent url(Images/PDFIcon.gif) center left no-repeat;
}

generates the error “Error parsing styles Affects: Internet Explorer 6.0″

Any advice?

Comment by hbadorties — 10 December 2007 #
@hbadorties -

I can’t be sure without having Dreamweaver CS3 to hand, but it’s probably throwing the warning because of the a[href$='.pdf'] selector.

IE6 doesn’t support these attribute selectors fully, meaning the styles wouldn’t be recognised by that browser, the upshot being that IE6 won’t display the custom styles for your links.

On the plus side, it wouldn’t break anything.

The only way around this is to manually apply the link styles with classes. So it’s not a critical warning, IE6 is just (unfortunately) incompatable with this method!

Comment by James — 10 December 2007 #
If you’re looking for a way to do this that will work in IE6, you can do it with Javascript — users who don’t have Javascript enabled won’t see it, but that’s likely a smaller population than users who are using IE6. I’ve written about a way to do it with jQuery here:

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

Comment by rdmey — 7 January 2008 #
It works on WP as well.

Comment by David Jacques-Louis — 23 February 2008 #
Great tips thanks

Comment by marketing and web design — 17 March 2008 #
Nice trick. I didn’t realize I could do that. I wish more websites did this. Although the icons used in this example do look a little big.

Comment by Robin Hak — 23 June 2008 #
The icons in the example are standard favicon size, although I take your point.

Comment by James — 25 June 2008 #
Hi. Good post, James – although a bit advanced for me to follow entirely at the stage I’m at with Dreamweaver CS3. Will revisit when I know more.

Just one query that I’m sure is simple, but that I can’t figure out. How do you add a title to an email link?

It’s simple to add an email link and to have the onsite text link read any way you want, but how do I have the subject line of the email already typed in, so the site visitor clicking on the email link doesn’t have to type a title in themselves before sending their email?

Would be appreciative of any help re this if it is not too time-consuming!

Cheers
Ross

Comment by Ross B — 12 July 2008 #
Ross – you’ll want to check out this page, “Using the mailto link”.

Comment by James — 12 July 2008 #
Brilliant! Thanks a lot, James!

Cheers
Ross

Comment by Ross B — 13 July 2008 #
Indeed useful! Thanks.

Comment by manas — 6 August 2008 #
IE 6 not support this code

Comment by Rajnikant — 2 September 2008 #
@Rajnikant – No, unfortunately not. You can achieve the same effect however, with javascript. Check our Rebecca Murphey’s article: http://blog.rebeccamurphey.com/2008/01/06/unobtrusive-cross-browser-add-filetype-icon-link-javascript-jquery.

Comment by James — 2 September 2008 #
Nice article. It was very helpful for me.

Comment by Wetter — 16 October 2008 #
I’m having trouble with the icons showing in IE. This works great in FF, however. I’m wondering if IE needs a specific doc type statement or if there’s another reason why these won’t show? I’m using your code almost verbatim.

a[href$='.pdf'] {
display:inline-block;
padding-left: 32px;
padding-top: 5px;
background: transparent url(/images/pdf_icon.gif) no-repeat center left;
}

On this page: http://www.calcounties.com/buyer-seller.php

The icons show in FF but not IE. Ideas on this?

Comment by Brian — 21 October 2008 #
@Brian – Internet Explorer 6 and below don’t support these CSS selectors. I’ve looked at your page in IE7 and it works, but IE6 doesn’t.

The only solution I can think of for IE6 would be using javascript (http://blog.rebeccamurphey.com/2008/01/06/unobtrusive-cross-browser-add-filetype-icon-link-javascript-jquery) which gets you the same effect by modifying the link classes.

Comment by James — 21 October 2008 #
It is a great way to add icons to links, but I have a problem :

a[href^="http:"] {
display:inline-block;
padding-right:14px;
background:transparent url(/Images/ExternalLink.gif) center right no-repeat;
}

using this, I have an icon before all links but I don’t want to have it when I link an image , I just want it to work with TEXT. Is it possible without using classes ?

Comment by Thierry — 3 November 2008 #
You can combine several CSS selectors to get it only targeting text links – try using p a[href^="http:"] {} to only select links inside a paragraph or overwrite the styles on images with img a[href^="http:"] { or a[href^="http:"] img { to reset the background image, padding and line-height elements.

Comment by James — 4 November 2008 #
CSS 2.1 is compatible with every type of browser like IE and Firfox….

Comment by kevin — 4 November 2008 #
Cascading Style Sheets (CSS) web design lessons
Css link Properties Attributes – examles
Css Link
Exanmples 1
Css Link Exanmples
2

Comment by css — 11 November 2008 #
Awesome !

Comment by Mehdi — 12 November 2008 #
I do like this idea, but has anyone noticed that if you have the link in the middle of a paragraph then zoom in just once in IE7 everything goes haywire – i’ve played around trying to fix it but have been unable to.

Comment by Matt — 2 December 2008 #
@Matt : I never noticed that before in Internet Explorer – but I’ve tested it and I see what you mean. I wonder wether the zoom property of CSS could fix that…

Comment by James — 2 December 2008 #
I tried to click the underlined “actually”.

Comment by Colin — 22 December 2008 #
@Colin – the underlined “actually” isn’t really a link, just underlined text.

Comment by James — 28 December 2008 #
I never noticed that before in IE – but I’ve tested it and I see what you mean. I wonder wether the zoom property of CSS could fix that…

Lee

Comment by Lee — 15 January 2009 #
These are only for CSS3 compliant browsers right?

Comment by Mahbub — 23 April 2009 #
Actually, these selectors are part of the CSS2 spec, so they don’t need CSS3 compliant browsers. Most major browsers from IE6 and up support the selectors on links.

Comment by James — 23 April 2009 #
nice Auto-matic Link Icons great tutorial thanks

Comment by raj — 11 May 2009 #
Hi!, nice trick!

It is possible to use something like this for all my downloads (www.mydomain.com/download.php?id=10, http://www.mydomain.com/download.php?id=11, http://www.mydomain.com/download.php?id=12 …)?

I tried this but doesn’t work:
a[href $=' .php?id=#'] { display:inline-block; padding-right:14px; background:transparent url(/Images/zip-icon.gif) center right no-repeat; }

any idea?

Comment by aurrutia — 11 May 2009 #
Thanks a lot, James

Comment by Tom — 13 June 2009 #
Thanks a lot. love it.

Comment by Yunus — 18 June 2009 #
Thanks. You saved me a lot of grief!

Comment by Mick — 25 July 2009 #
Great tips thanks

Comment by Thom — 1 August 2009 #
http://www.pdf.com/PDF.pdf

Comment by pdf — 6 August 2009 #
Hi, thanks for this tutorial, very very useful, but I’m having a bit of a problem…
Is there any code I could use to block the external link image appearing for all my links? Now it’s displaying in every link I have in my blog, which is upsetting my layout a bit (like links for comments and categories are all displaying my external link image :-s).
Thanks

Comment by Carola}i{ — 26 August 2009 #
Carola – the best way to limit the effects is using more specific CSS – so instead of:

a[href^="http:"] {}

you could do

.content a[href^="http:"] {}

which would only affect the links inside the content container, and leave everything outside it alone.

Comment by James — 26 August 2009 #
@ James – Thanks, but it didn’t work unfortunately

Comment by Carola}i{ — 26 August 2009 #
@aurrutia – I suspect that in a[href $=' .php?id=#'] the # isn’t matching your actual links, I’d suggest trying a[href*="download.php?"]

Thats assuming that all your downloads go through that page and that no other pages contain the string download.php

@Carola – I’d guess that means that all links on your site are absolute rather than relative, so you could try using the standard:

a[href^="http:"]
{
/* apply your external link styles here */
}

then overriding and resetting the styles for links which are internal to your domain by doing something like:

a[href^="http://www.yourdomain.com"]
{
/* reset your internal link styles here */
}

hth
Matt

Comment by Matt — 27 August 2009 #
I have to say it is a little hard for me to understand all.
But thank you so much.

Comment by Fania — 5 September 2009 #
how to call avatar from profile? is it possible?

Comment by ozan — 21 October 2009 #
@ozan – Check out http://en.gravatar.com/ to see how to get your picture alongside your comments.

Comment by James — 21 October 2009 #
test: http://shopandsupport.ca/sasgroup/resources/SAS_ORDERFORM_0909.pdf

Comment by Ted — 2 November 2009 #
This is very useful information for me, thanks to everyone that has made useful comments, i have learnt a lot today.

Comment by Peter — 6 November 2009 #
James,

Great post!

Nothing irks me more than clicking a link that turns out to be a PDF file. I’ve already implemented your code for PDF links on a site I’m creating. I’m eager to try out the code on other types of links as well. Thanks, too, for the link to the famfamfam silk icon set.

BTW, I have lint in my belly button as old as you (was that TMI?)

Comment by Douglas Helmer — 16 December 2009 #
TMI

Comment by James — 16 December 2009 #
Good work James. Though its not working on that IE6 but you have given a great tip. Going to bookmark

Comment by Umair — 26 January 2010 #