File download icon

I spent an hour yesterday sprucing up the ‘file download’ icon I use on one of my websites, and I’m putting my Photoshop file up here for you to use if you like. I’ve made it very easy to change the color scheme of the icon, or to modify the graphic on its label, so you’ll have no trouble adjusting it to suit your own needs.

Row of file download icons

Download

Download Photoshop CS2 file

How to use it

Here is some simple CSS styling you can use to turn an ordinary link into a spiffy looking file download button.

The HTML:

<p class="fileDownload">
    <a href="myfile.pdf">Download Annual Report (PDF 120Kb)</a>
</p>

The CSS:

.fileDownload {
    background: transparent url(file_icon.gif) no-repeat left top;
    display: block;
    height: 35px;
    padding-left: 36px;
}

The final result:

Download Annual Report (PDF 120Kb)

14 thoughts on “File download icon

  1. Clive Walker says:

    You can style links similarly using the attribute selector like this
    a[href$=”.pdf”] {background-image: url(file_icon.gif); padding-left etc etc} which would remove the need to put a div round each link.

  2. Why not set the class directly on the link? Why is the div needed?

  3. Jonathan says:

    @Emil – Here is my reasoning for not applying the style directly to the <a> tag. If you do that, you need to make the <a> a block level element, which means rather than the text being the ‘hit area’, the entire element is. So the ‘hit area’ will be as wide as the entire containing element, which I think is quite poor from a usability perspective. Here’s an example – notice how the link spans the entire page width.

    A solution would be to make the <a> an inline-block element, but then it would still need a block level element (a div or paragraph) surrounding it to force it onto its own line.

    What are your thoughts?

  4. Jonathan says:

    @Clive – See my comment above where I explain the reason I chose to apply the style to the parent element rather than the link. I’m keen to hear your thoughts on this one.

    Your suggestion for a conditional selector is a nice one, provided you don’t mind IE6 users not seeing the icon.

    For anyone who wants to know more about the technique Clive is suggesting, one of my readers wrote a nice article about it on his blog.

  5. Cool icons! Actually, I’m working on a pack of icons to give to my blog readers myself, quite the coincidence I must say!

  6. Jonathan says:

    @Kalle – Cool, let me know when your icons are finished. There can never be too many icons in the the world!

  7. Clive Walker says:

    @Jonathan, re IE6, I guess I am hoping that IE6 usage will rapidly decline ;-)
    Re, div or no div, inline-block applied to the a element is good for me and surrounding the a element with a paragraph seems more ‘natural’, if you need the a element on its own line. I don’t think you need inline-block in all cases though.

  8. Jonathan says:

    Sorry, dumb me, inline-block isn’t supported by Firefox 2 and lower (it has made it into FF 3). The proprietary -moz-inline-box property does what we want for Firefox, but I discovered it doesn’t support text-decoration on links, which in the case of styling an <a> tag makes it useless.

    So… at this stage I think the CSS I’m using is probably the best we will get in terms of cross browser compatibility and usability. I agree that it would be cleaner to have the class applied directly to the <a>, but I don’t see how it can be made to work without side effects. Any suggestions are welcome.

  9. James says:

    @Jonathan, Well, you’ve got me stumped there. It’s a good solution though – and the end result is stable enough to withstand being applied to other elements? (Like Paragraphs instead of Divs)

  10. Jonathan says:

    @James – Yeah, paragraph or div will make no difference, other than semantically. The main purpose of this post was to offer the icon for download, and people can use it in whatever way they see fit. The CSS I’ve used shows how I would go about it, but of course there is more than one way to skin a cat (so to speak!).

  11. Thanks for the file dude

  12. I see your reasoning, seems fair to me :) Thanks for the icon!

  13. sfewr says:

    I dont like it, the icon itself is not clickable and ppl wanna click on the icon

  14. Teemo says:

    Ohyeah, using! LOVE ITTT!

Comments are closed.