CSS Document Link Icons

Sometimes you will find yourself linking to documents from a page.  Suppose you need to link to a PDF, an Excel spreadsheet, or a Microsoft Word document.  I think that it is in good form to visually denote that these links will begin a download.

In a lot of cases, these types of links look exactly the same as any other HTML link.  Not exactly optimal from a usability standpoint.

After the jump, I will share a little CSS trick to give document download links a proper icon automatically.

I was working on a site that was screaming for icons next to the document links.  A little searching led me to finding the following CSS which will place icons automatically beside any link that is pointing directly to a downloadable file.

/* fancy document links */
a[href$=".PDF"], a[href$=".pdf"] {
padding: 2px 2px 2px 20px;
background: url("ui/pdficon_small.gif") left center no-repeat;
a[href$=".DOC"], a[href$=".doc"] {
padding: 2px 2px 2px 20px;
background: url("ui/img_microsoftWordIcon.gif") left center no-repeat;

The images that I used in this example were saved from Adobe.com and some random site that was in images.google.  As you can see, you could do this with any file type you wish – but in this example, the rules are only for PDFs and DOCs.  The icons in this example were 17×17.

In my opinion, it’s not very user friendly to link to downloadable documents the same as any other web link.  I’m willing to bet that not everyone looks at their browser’s status bar before they click a link to get an idea what is going to happen when they click it.  This method of showing icons next to a download is easy and looks as these types of links should.

Be Sociable, Share!
This entry was posted in Code and tagged . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


This site uses Akismet to reduce spam. Learn how your comment data is processed.