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: 14% [?]
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
February 6th, 2009 at 2:26 am
who cares if IE6 isn’t supported. by now no one should be supporting that dinosaur anyway.
March 27th, 2009 at 5:05 pm
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.
April 15th, 2009 at 2:27 pm
Thank you!
yeah ie6 not supported, but it’s not problem.
April 16th, 2009 at 7:23 am
[...] dosya tipini ikon şeklinde göstermek [...]
April 21st, 2009 at 10:30 pm
[...] dosya tipini ikon şeklinde göstermek [...]
May 30th, 2009 at 6:46 pm
[...] If you are linking directly to a file, why not let your users know about it? I’m always terribly annoyed when Acrobat launches by surprise. One way many thoughtful web writers deal with this issue is by adding (PDF) after the link. It would be even better if you used the proper CSS technique that does it automagically! Web-kreation has a good explanation on how to do that. [...]
June 16th, 2009 at 8:59 pm
[...] Source: Add File Type Icons next to your links with CSS [...]
June 18th, 2009 at 3:20 am
Very cool!
June 18th, 2009 at 2:43 pm
[...] 来源：Add File Type Icons next to your links with CSS [...]
June 19th, 2009 at 8:33 am
[...] 使用CSS选择器创建个性化链接样式使用CSS为链接添加文档类型图标 VN:F [1.4.5_712]提交中…Rating: 0.0/10 (0 votes [...]
June 19th, 2009 at 8:11 pm
[...] 资源: 使用CSS选择器创建个性化链接样式 使用CSS为链接添加文档类型图标 [...]
August 3rd, 2009 at 4:52 pm
[...] Add File Type Icons next to your links with CSSAnother tutorial for adding file type icons to your links. [...]
August 3rd, 2009 at 8:05 pm
[...] Add File Type Icons next to your links with CSSAnother tutorial for adding file type icons to your links. [...]
August 3rd, 2009 at 8:24 pm
[...] Add File Type Icons next to your links with CSSAnother tutorial for adding file type icons to your links. [...]
August 4th, 2009 at 6:17 am
[...] Add File Type Icons next to your links with CSSAnother tutorial for adding file type icons to your links. [...]
August 5th, 2009 at 12:29 am
Nice, needs support for IE6 though
August 6th, 2009 at 11:27 am
[...] Add File Type Icons next to your links with CSSAnother tutorial for adding file type icons to your links. [...]
August 9th, 2009 at 5:53 am
[...] Add File Type Icons next to your links with CSSAnother tutorial for adding file type icons to your links. [...]
September 16th, 2009 at 10:50 pm
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
January 9th, 2010 at 3:53 pm
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).
January 10th, 2010 at 5:00 am
[...] http://web-kreation.com/index.php/ht…inks-with-css/ [...]
January 11th, 2010 at 11:52 am
THANKS! This is awesome and just what I was looking for! I didn’t know CSS was so powerful.
January 12th, 2010 at 1:06 pm
[...] Add File Type Icons next to your links with CSS 为链接添加文件类型图标的教程。 [...]