File Styling

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. http://www.splitbrain.org/projects/file_icons

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 a 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 expected syntax:

  1. <div class="file file-pdf">
  2.         <div class="link"><a href="">Linky</a></div>
  3.         <div class="description">Html</div>
  4. </div>

  1. .file {
  2.         display:block;
  3. }
  4.  
  5. .file .link {
  6.         background-image:url(/images/icons/16x16/file.png);
  7.         background-position:0 50%;
  8.         background-repeat:no-repeat;
  9.         display:block;
  10.         line-height:16px;
  11. }
  12.  
  13. .file .link a {
  14.         padding-left:26px;
  15. }
  16.  
  17. /* Specific File Icons */
  18. .file-7z .link { background-image:url(/images/icons/16x16/7z.png); }
  19. .file-ai .link { background-image:url(/images/icons/16x16/ai.png); }
  20. .file-aiff .link { background-image:url(/images/icons/16x16/aiff.png); }
  21. .file-asc .link { background-image:url(/images/icons/16x16/asc.png); }
  22. .file-audio .link { background-image:url(/images/icons/16x16/audio.png); }
  23. .file-bin .link { background-image:url(/images/icons/16x16/bin.png); }
  24. .file-bz2 .link { background-image:url(/images/icons/16x16/bz2.png); }
  25. .file-c .link { background-image:url(/images/icons/16x16/c.png); }
  26. .file-cfc .link { background-image:url(/images/icons/16x16/cfc.png); }
  27. .file-cfm .link { background-image:url(/images/icons/16x16/cfm.png); }
  28. .file-chm .link { background-image:url(/images/icons/16x16/chm.png); }
  29. .file-class .link { background-image:url(/images/icons/16x16/class.png); }
  30. .file-conf .link { background-image:url(/images/icons/16x16/conf.png); }
  31. .file-cpp .link { background-image:url(/images/icons/16x16/cpp.png); }
  32. .file-cs .link { background-image:url(/images/icons/16x16/cs.png); }
  33. .file-css .link { background-image:url(/images/icons/16x16/css.png); }
  34. .file-csv .link { background-image:url(/images/icons/16x16/csv.png); }
  35. .file-deb .link { background-image:url(/images/icons/16x16/deb.png); }
  36. .file-divx .link { background-image:url(/images/icons/16x16/divx.png); }
  37. .file-doc .link { background-image:url(/images/icons/16x16/doc.png); }
  38. .file-dot .link { background-image:url(/images/icons/16x16/dot.png); }
  39. .file-eml .link { background-image:url(/images/icons/16x16/eml.png); }
  40. .file-gif .link { background-image:url(/images/icons/16x16/gif.png); }
  41. .file-gz .link { background-image:url(/images/icons/16x16/gz.png); }
  42. .file-hlp .link { background-image:url(/images/icons/16x16/hlp.png); }
  43. .file-htm .link { background-image:url(/images/icons/16x16/htm.png); }
  44. .file-html .link { background-image:url(/images/icons/16x16/html.png); }
  45. .file-image .link { background-image:url(/images/icons/16x16/image.png); }
  46. .file-iso .link { background-image:url(/images/icons/16x16/iso.png); }
  47. .file-jar .link { background-image:url(/images/icons/16x16/jar.png); }
  48. .file-java .link { background-image:url(/images/icons/16x16/java.png); }
  49. .file-jpeg .link { background-image:url(/images/icons/16x16/jpeg.png); }
  50. .file-jpg .link { background-image:url(/images/icons/16x16/jpg.png); }
  51. .file-js .link { background-image:url(/images/icons/16x16/js.png); }
  52. .file-lua .link { background-image:url(/images/icons/16x16/lua.png); }
  53. .file-m .link { background-image:url(/images/icons/16x16/m.png); }
  54. .file-mm .link { background-image:url(/images/icons/16x16/mm.png); }
  55. .file-mov .link { background-image:url(/images/icons/16x16/mov.png); }
  56. .file-mp3 .link { background-image:url(/images/icons/16x16/mp3.png); }
  57. .file-mpg .link { background-image:url(/images/icons/16x16/mpg.png); }
  58. .file-odc .link { background-image:url(/images/icons/16x16/odc.png); }
  59. .file-odf .link { background-image:url(/images/icons/16x16/odf.png); }
  60. .file-odg .link { background-image:url(/images/icons/16x16/odg.png); }
  61. .file-odi .link { background-image:url(/images/icons/16x16/odi.png); }
  62. .file-odp .link { background-image:url(/images/icons/16x16/odp.png); }
  63. .file-ods .link { background-image:url(/images/icons/16x16/ods.png); }
  64. .file-odt .link { background-image:url(/images/icons/16x16/odt.png); }
  65. .file-ogg .link { background-image:url(/images/icons/16x16/ogg.png); }
  66. .file-pdf .link { background-image:url(/images/icons/16x16/pdf.png); }
  67. .file-pgp .link { background-image:url(/images/icons/16x16/pgp.png); }
  68. .file-php .link { background-image:url(/images/icons/16x16/php.png); }
  69. .file-pdf .link { background-image:url(/images/icons/16x16/pdf.png); }
  70. .file-pl .link { background-image:url(/images/icons/16x16/pl.png); }
  71. .file-png .link { background-image:url(/images/icons/16x16/png.png); }
  72. .file-ppt .link { background-image:url(/images/icons/16x16/ppt.png); }
  73. .file-ps .link { background-image:url(/images/icons/16x16/ps.png); }
  74. .file-py .link { background-image:url(/images/icons/16x16/py.png); }
  75. .file-ram .link { background-image:url(/images/icons/16x16/ram.png); }
  76. .file-rar .link { background-image:url(/images/icons/16x16/rar.png); }
  77. .file-rb .link { background-image:url(/images/icons/16x16/rb.png); }
  78. .file-rm .link { background-image:url(/images/icons/16x16/rm.png); }
  79. .file-rpm .link { background-image:url(/images/icons/16x16/rpm.png); }
  80. .file-rtf .link { background-image:url(/images/icons/16x16/rtf.png); }
  81. .file-sig .link { background-image:url(/images/icons/16x16/sig.png); }
  82. .file-sql .link { background-image:url(/images/icons/16x16/sql.png); }
  83. .file-swf .link { background-image:url(/images/icons/16x16/swf.png); }
  84. .file-scx .link { background-image:url(/images/icons/16x16/scx.png); }
  85. .file-sxd .link { background-image:url(/images/icons/16x16/sxd.png); }
  86. .file-sxi .link { background-image:url(/images/icons/16x16/sxi.png); }
  87. .file-swx .link { background-image:url(/images/icons/16x16/sxw.png); }
  88. .file-tar .link { background-image:url(/images/icons/16x16/tar.png); }
  89. .file-tex .link { background-image:url(/images/icons/16x16/tex.png); }
  90. .file-tgz .link { background-image:url(/images/icons/16x16/tgz.png); }
  91. .file-txt .link { background-image:url(/images/icons/16x16/txt.png); }
  92. .file-vcf .link { background-image:url(/images/icons/16x16/vcf.png); }
  93. .file-video .link { background-image:url(/images/icons/16x16/video.png); }
  94. .file-vsd .link { background-image:url(/images/icons/16x16/vsd.png); }
  95. .file-wav .link { background-image:url(/images/icons/16x16/wav.png); }
  96. .file-wma .link { background-image:url(/images/icons/16x16/wma.png); }
  97. .file-wmv .link { background-image:url(/images/icons/16x16/wmv.png); }
  98. .file-xls .link { background-image:url(/images/icons/16x16/xls.png); }
  99. .file-xml .link { background-image:url(/images/icons/16x16/xml.png); }
  100. .file-xpi .link { background-image:url(/images/icons/16x16/xpi.png); }
  101. .file-xvid .link { background-image:url(/images/icons/16x16/xvid.png); }
  102. .file-zip .link { background-image:url(/images/icons/16x16/zip.png); }
  103. <css>

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.