Add File Type Icons next to your links with CSS
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:
1 2 3 4 5 | 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 :
1 2 3 4 5 6 | 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | /* 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.
The Author
Want to become a guest author on this blog?
Diane says:
24 Sep, 2007
Great advice as usual, Jeremie!
Thank you!
Absolute says:
2 Oct, 2007
IE6 not support!
shane plasebo says:
10 Oct, 2007
I ve found this code in the Tripoli CSS framework.
By the way, some of the pseudo-classes defined do not work on IE
shane plasebo says:
10 Oct, 2007
You will have to define a class in your CSS and call in the tag for IE to use it.
Jeremy Schrader says:
2 Nov, 2007
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.
Jeremie Tisseau says:
3 Nov, 2007
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.
rdmey says:
7 Jan, 2008
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
Jeremie Tisseau says:
7 Jan, 2008
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
Beach says:
6 Feb, 2009
who cares if IE6 isn t supported. by now no one should be supporting that dinosaur anyway.
shahriveri says:
27 Mar, 2009
Hi,
great tips but i have a big issue which i m hoping you could offer some advice.
I am currently styling an asp.net website from out of house developers and have tried enforcing the icons for the links. Users can upload files but currently the links to word docs and pdf s are generated through a javascript__doPostBack and so the the icons do not appear. is there anyway of pinpointing the asp/javascript generated links in the css so the icons will show?
will appreciate any advice.
Emre Toprak says:
15 Apr, 2009
Thank you!
yeah ie6 not supported, but it s not problem.
The Frosty says:
18 Jun, 2009
Very cool!
Bradford Sherrill says:
5 Aug, 2009
Nice, needs support for IE6 though
Benga says:
16 Sep, 2009
While not supported by ie6, this is still an interesting post. The little things that are essential to know, which will save any designer/developer sometime when need.
Benga creative
Kennith Nichol - Conversion Expert says:
9 Jan, 2010
It s quite surprising to find out how many CSS 2.1 features are overlooked or completely forgoet. As for IE6 support, obviously in this situation it would be required to employ a supplementary stylesheet which will require class attributes on the link tags, but that s only if you want to support a 2 generation old browser. (which, of course, most clients really appreciate).
Kawika says:
11 Jan, 2010
THANKS! This is awesome and just what I was looking for! I didn t know CSS was so powerful.
website erstellen says:
7 Apr, 2010
These really helped me to build my homepage, I can really appreciated if people take some time and write a usefull tutorial.
Web Dizajn says:
18 Apr, 2010
Simple effective solutions :))) Thank you.
Daniel says:
26 May, 2010
Great tip! Just what I was looking for. I thougth I d need a plugin…
Thank you very much!
tellos says:
19 Aug, 2010
Hello,
It works great to display an icon for a file type I know end with .doc .txt etc.
How could I display a general incone for unknown file type?
Thank you
web dizajn says:
20 Jan, 2011
Thank you very much for this very interesting post. I would like to see fix for IE6. Thx
Jeeremie says:
11 Feb, 2011
Ths is a CSS3 feature. IE6 does not support CSS3. Upgrade to a more recent browser.
Renji says:
27 Aug, 2011
Hi Jeeremie, is it possible to do this using CSS sprite?
Jeeremie says:
30 Aug, 2011
Yes. It would be most recommended for this case. I didn t use it here because this was just an example and readers might not need all of them on their sites.