Add File Type Icons next to your links with CSS

September 24, 2007

All, HTML / CSS

Add File Type Icons next to your links with CSS

Article written by Jeeremie

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:

File Type Icons

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

Article written by Jeeremie:

Hi, My Name is Jeremie Tisseau. I am a French UI/UX Designer, Event Organizer and Web Entrepreneur based in Bangkok, Thailand, since January 2009. I design beautiful and functional web and mobile apps for early stage startups.

Tweet

Want to become a guest author on this blog?

24 Comments

  1. Diane says:

    24 Sep, 2007

    Great advice as usual, Jeremie!

    Thank you!

  2. Absolute says:

    2 Oct, 2007

    IE6 not support!

  3. 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

  4. 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.

  5. 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.

  6. 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.

  7. 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

  8. 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

  9. Beach says:

    6 Feb, 2009

    who cares if IE6 isn t supported. by now no one should be supporting that dinosaur anyway.

  10. 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.

  11. Emre Toprak says:

    15 Apr, 2009

    Thank you!

    yeah ie6 not supported, but it s not problem.

  12. The Frosty says:

    18 Jun, 2009

    Very cool!

  13. Bradford Sherrill says:

    5 Aug, 2009

    Nice, needs support for IE6 though

  14. 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

  15. 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).

  16. Kawika says:

    11 Jan, 2010

    THANKS! This is awesome and just what I was looking for! I didn t know CSS was so powerful.

  17. 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.

  18. Web Dizajn says:

    18 Apr, 2010

    Simple effective solutions :))) Thank you.

  19. Daniel says:

    26 May, 2010

    Great tip! Just what I was looking for. I thougth I d need a plugin…

    Thank you very much!

  20. 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

  21. 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. :)

  22. 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.

Leave a Reply

Sorry, comments are closed