Fragmented Thought
TwitterGitHub

Splitbrain File Styling

By

Published:

Lance Gliser

Heads up! This content is more than six months old. Take some time to verify everything still works as expected.

I ran across a fantastic resource for file icons today, thought I'd share it for you all. Andreas Gohr has fine archive of 16x16 .png images to use with your file styling. He's got some nice generic types, as well a fairly extensive collection of specific formats.

To go along with his contribution, I've worked up the tedious bit of icon styling. It's not revolutionary, but it'll save you the trouble of having to type so many lines of simple css. Yes, I style for .link instead of tags. To get the line-height to work well, the container must be display:block, and maybe you don't want your file links to be blocks. If you need, here's the basic syntax:

<div class="file file-pdf">
  <div class="link"><a href="">Linky</a></div>
  <div class="description">Html</div>
</div>
.file {
  display: block;
}

.file .link {
  background-image: url(/images/icons/16x16/file.png);
  background-position: 0 50%;
  background-repeat: no-repeat;
  display: block;
  line-height: 16px;
}

.file .link a {
  padding-left: 26px;
}

/* Specific File Icons */
.file-7z .link {
  background-image: url(/images/icons/16x16/7z.png);
}
.file-ai .link {
  background-image: url(/images/icons/16x16/ai.png);
}
.file-aiff .link {
  background-image: url(/images/icons/16x16/aiff.png);
}
.file-asc .link {
  background-image: url(/images/icons/16x16/asc.png);
}
.file-audio .link {
  background-image: url(/images/icons/16x16/audio.png);
}
.file-bin .link {
  background-image: url(/images/icons/16x16/bin.png);
}
.file-bz2 .link {
  background-image: url(/images/icons/16x16/bz2.png);
}
.file-c .link {
  background-image: url(/images/icons/16x16/c.png);
}
.file-cfc .link {
  background-image: url(/images/icons/16x16/cfc.png);
}
.file-cfm .link {
  background-image: url(/images/icons/16x16/cfm.png);
}
.file-chm .link {
  background-image: url(/images/icons/16x16/chm.png);
}
.file-class .link {
  background-image: url(/images/icons/16x16/class.png);
}
.file-conf .link {
  background-image: url(/images/icons/16x16/conf.png);
}
.file-cpp .link {
  background-image: url(/images/icons/16x16/cpp.png);
}
.file-cs .link {
  background-image: url(/images/icons/16x16/cs.png);
}
.file-css .link {
  background-image: url(/images/icons/16x16/css.png);
}
.file-csv .link {
  background-image: url(/images/icons/16x16/csv.png);
}
.file-deb .link {
  background-image: url(/images/icons/16x16/deb.png);
}
.file-divx .link {
  background-image: url(/images/icons/16x16/divx.png);
}
.file-doc .link {
  background-image: url(/images/icons/16x16/doc.png);
}
.file-dot .link {
  background-image: url(/images/icons/16x16/dot.png);
}
.file-eml .link {
  background-image: url(/images/icons/16x16/eml.png);
}
.file-gif .link {
  background-image: url(/images/icons/16x16/gif.png);
}
.file-gz .link {
  background-image: url(/images/icons/16x16/gz.png);
}
.file-hlp .link {
  background-image: url(/images/icons/16x16/hlp.png);
}
.file-htm .link {
  background-image: url(/images/icons/16x16/htm.png);
}
.file-html .link {
  background-image: url(/images/icons/16x16/html.png);
}
.file-image .link {
  background-image: url(/images/icons/16x16/image.png);
}
.file-iso .link {
  background-image: url(/images/icons/16x16/iso.png);
}
.file-jar .link {
  background-image: url(/images/icons/16x16/jar.png);
}
.file-java .link {
  background-image: url(/images/icons/16x16/java.png);
}
.file-jpeg .link {
  background-image: url(/images/icons/16x16/jpeg.png);
}
.file-jpg .link {
  background-image: url(/images/icons/16x16/jpg.png);
}
.file-js .link {
  background-image: url(/images/icons/16x16/js.png);
}
.file-lua .link {
  background-image: url(/images/icons/16x16/lua.png);
}
.file-m .link {
  background-image: url(/images/icons/16x16/m.png);
}
.file-mm .link {
  background-image: url(/images/icons/16x16/mm.png);
}
.file-mov .link {
  background-image: url(/images/icons/16x16/mov.png);
}
.file-mp3 .link {
  background-image: url(/images/icons/16x16/mp3.png);
}
.file-mpg .link {
  background-image: url(/images/icons/16x16/mpg.png);
}
.file-odc .link {
  background-image: url(/images/icons/16x16/odc.png);
}
.file-odf .link {
  background-image: url(/images/icons/16x16/odf.png);
}
.file-odg .link {
  background-image: url(/images/icons/16x16/odg.png);
}
.file-odi .link {
  background-image: url(/images/icons/16x16/odi.png);
}
.file-odp .link {
  background-image: url(/images/icons/16x16/odp.png);
}
.file-ods .link {
  background-image: url(/images/icons/16x16/ods.png);
}
.file-odt .link {
  background-image: url(/images/icons/16x16/odt.png);
}
.file-ogg .link {
  background-image: url(/images/icons/16x16/ogg.png);
}
.file-pdf .link {
  background-image: url(/images/icons/16x16/pdf.png);
}
.file-pgp .link {
  background-image: url(/images/icons/16x16/pgp.png);
}
.file-php .link {
  background-image: url(/images/icons/16x16/php.png);
}
.file-pdf .link {
  background-image: url(/images/icons/16x16/pdf.png);
}
.file-pl .link {
  background-image: url(/images/icons/16x16/pl.png);
}
.file-png .link {
  background-image: url(/images/icons/16x16/png.png);
}
.file-ppt .link {
  background-image: url(/images/icons/16x16/ppt.png);
}
.file-ps .link {
  background-image: url(/images/icons/16x16/ps.png);
}
.file-py .link {
  background-image: url(/images/icons/16x16/py.png);
}
.file-ram .link {
  background-image: url(/images/icons/16x16/ram.png);
}
.file-rar .link {
  background-image: url(/images/icons/16x16/rar.png);
}
.file-rb .link {
  background-image: url(/images/icons/16x16/rb.png);
}
.file-rm .link {
  background-image: url(/images/icons/16x16/rm.png);
}
.file-rpm .link {
  background-image: url(/images/icons/16x16/rpm.png);
}
.file-rtf .link {
  background-image: url(/images/icons/16x16/rtf.png);
}
.file-sig .link {
  background-image: url(/images/icons/16x16/sig.png);
}
.file-sql .link {
  background-image: url(/images/icons/16x16/sql.png);
}
.file-swf .link {
  background-image: url(/images/icons/16x16/swf.png);
}
.file-scx .link {
  background-image: url(/images/icons/16x16/scx.png);
}
.file-sxd .link {
  background-image: url(/images/icons/16x16/sxd.png);
}
.file-sxi .link {
  background-image: url(/images/icons/16x16/sxi.png);
}
.file-swx .link {
  background-image: url(/images/icons/16x16/sxw.png);
}
.file-tar .link {
  background-image: url(/images/icons/16x16/tar.png);
}
.file-tex .link {
  background-image: url(/images/icons/16x16/tex.png);
}
.file-tgz .link {
  background-image: url(/images/icons/16x16/tgz.png);
}
.file-txt .link {
  background-image: url(/images/icons/16x16/txt.png);
}
.file-vcf .link {
  background-image: url(/images/icons/16x16/vcf.png);
}
.file-video .link {
  background-image: url(/images/icons/16x16/video.png);
}
.file-vsd .link {
  background-image: url(/images/icons/16x16/vsd.png);
}
.file-wav .link {
  background-image: url(/images/icons/16x16/wav.png);
}
.file-wma .link {
  background-image: url(/images/icons/16x16/wma.png);
}
.file-wmv .link {
  background-image: url(/images/icons/16x16/wmv.png);
}
.file-xls .link {
  background-image: url(/images/icons/16x16/xls.png);
}
.file-xml .link {
  background-image: url(/images/icons/16x16/xml.png);
}
.file-xpi .link {
  background-image: url(/images/icons/16x16/xpi.png);
}
.file-xvid .link {
  background-image: url(/images/icons/16x16/xvid.png);
}
.file-zip .link {
  background-image: url(/images/icons/16x16/zip.png);
}