Many people use Javascript to automatically add file type icons to their external links, mailto links, Word, PDF, Excel Document links… when it can be done very easily with CSS 2.1.
Here is an example:
HowTo:
The trick is to use the attibute selector (using the [square brackets]) with the “a” tags. For example, if you want all your external links to display an icon, use a[href^=”http://”] in your CSS stylesheet:
a[href^="http://"] { background:transparent url(../images/external.png) center right no-repeat; display:inline-block; padding-right:15px; } |
The operator “^” means “start with”. Thus the code a[href^=”http://”] will add an icon to links starting with the attribute “http://”.
The operator $:
Another useful operator is $ wich means “end with”. You can use it with any extensions you might think of (.doc, .pdf, .xls, .zip, .rar…).
e.g. a[href$='.zip'] will display an icon next to any links to a document ending with the extension .zip :
a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'] { background:transparent url(../images/zip.png) center left no-repeat; display:inline-block; padding-left:20px; line-height:18px; } |
Some more examples:
You could use this to customize links to PDF documents, Word documents, mailto… Here are some examples you might want to use in the future:
/* PDF document links */ a[href$='.pdf'] { background:transparent url(../images/pdf.png) center left no-repeat; display:inline-block; padding-left:20px; line-height:15px; } /* Excel Documents links */ a[href$='.xls'], a[href$='.csv'], a[href$='.xlw'], a[href$='.xlt'] { background:transparent url(../images/excel.png) center left no-repeat; display:inline-block; padding-left:20px; line-height:15px; } /* Word Document Links */ a[href$='.doc'], a[href$='.rtf'], a[href$='.wps'], a[href$='.txt'] { background:transparent url(../images/word.png) center left no-repeat; display:inline-block; padding-left:20px; line-height:15px; } /* mailto: links */ a[href^="mailto:"] { background:transparent url(../images/mailto.png) center left no-repeat; display:inline-block; padding-left:20px; line-height:15px; } |
The icons
You can download some free icons at:
IconFinder.net
FamFamFam
Note:
The attribute selector works fine in the most recent browsers.
Popularity: 11% [?]
September 24th, 2007 at 7:16 pm
Great advice as usual, Jeremie!
Thank you!
October 2nd, 2007 at 11:00 pm
IE6 not support!
October 10th, 2007 at 4:31 pm
I’ve found this code in the Tripoli CSS framework.
By the way, some of the pseudo-classes defined do not work on IE
October 10th, 2007 at 4:33 pm
You will have to define a class in your CSS and call in the tag for IE to use it.
November 2nd, 2007 at 8:40 pm
anyone got this to work on IE 6?
tag for IE to use?? what are the specific tags…?
I assumed that it was working since it displayed at the top of the page, but then looked again and noticed that the “example” was not actually a working example.
http://schraderdesigns.com/VanguardGMAC/VRO/Forms_Drawer.shtml
I’ve got it working on just about everything else. very easy setup by the way, and glad you linked the icon finder link - hadn’t seen that one before, very useful.
November 3rd, 2007 at 11:34 am
Hi Jeremy,
Yes, you are right. It is not a working example (I didn’t want to have an icon for all my external links and mailto links).
This code is not supported in IE6. I am sorry if I forgot to mention it.
January 7th, 2008 at 3:03 am
If you’re looking for a cross-browser method of accomplishing this, Javascript will do the trick. I’ve written about a way to do it with jQuery here: Unobtrusive, cross-browser method to add icons to links
January 7th, 2008 at 11:04 am
Thank you very much for this very interesting post. This will be a great addition to mine.
Could be nice if you show us an example on your post