File Type Link Labeling

I was reading a blog post about PDF Link Labeling the other day, which was inspired by another article by Garret Dimon. I really liked the idea so I thought I might be able to expand on it, and create some icons that anyone can use for their own site.

As I’ve been doing a lot lately, I put up an example of what file type link labeling looks like. I’ve included zip, pdf, doc, mov, mp3, and txt files.

The first piece of this involves giving each file type their own class. You could do it manually or use this piece of javascript from Marko Dugonjic

if (fileLink.href.indexOf('.doc') != -1) {
                fileLink.setAttribute('target', '_blank');
                fileLink.className = 'doclink';

That’s a small piece of code to give you an idea. The rest I’ve added into a javascript file: doctype.js

Once you’ve given everything a class name, you’ll want to style the classes with some icons. For example:
.doclink{background:url("doc_icon.png") no-repeat;padding:2px 0px 2px 16px;}
The rest you’ll find in this CSS file: doctype.css

And here are all the icons I’ve created for anyone to use:

If you’d like to download them all as a zip file: doctype.zip

If you’d like to see anymore icons to label your file types with, leave a comment.