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.
Download
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:
14 thoughts on “File download icon”
Comments are closed.
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.
Why not set the class directly on the link? Why is the div needed?
@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?
@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.
Cool icons! Actually, I’m working on a pack of icons to give to my blog readers myself, quite the coincidence I must say!
@Kalle – Cool, let me know when your icons are finished. There can never be too many icons in the the world!
@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.
Sorry, dumb me,
inline-blockisn’t supported by Firefox 2 and lower (it has made it into FF 3). The proprietary-moz-inline-boxproperty does what we want for Firefox, but I discovered it doesn’t supporttext-decorationon 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.@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)
@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!).
Thanks for the file dude
I see your reasoning, seems fair to me :) Thanks for the icon!
I dont like it, the icon itself is not clickable and ppl wanna click on the icon
Ohyeah, using! LOVE ITTT!