Tag Archives: files

How to quickly handle file extensions icons, only via CSS no JS no PHP

This is the quickest way to put different icons for downloadable files, via CSS, no JS or PHP needed.


  a.download-link:before{
    content: url('default.gif');
    margin-right: 6px;
    vertical-align: middle;
  }

  a.download-link[href$='.pdf']:before{
    content: url('pdf.gif');
  }

  a.download-link[href$='.doc']:before,
  a.download-link[href$='.rtf']:before,
  a.download-link[href$='.txt']:before  {
    content: url('doc.gif');
  }

  a.download-link[href$='.docx']:before {
    content: url('docx.gif');
  }

  a.download-link[href$='.xls']:before {
    content: url('xls.gif');
  }

  a.download-link[href$='.xlsx']:before  {
    content: url('xlsx.gif');
  }