Icons vor Dateien

Icons vor Dateien

Hat man auf seiner Seite einen Download Bereich oder möchte aus anderen Gründen Links zu Dateien mit kleinen Icons bestücken, so ist das mit CSS relativ einfach umzusetzen.

/* PDF-Links */
div#col2_content a[href$='.pdf'] {
  background: url(/fileadmin/icons/file/pdf.gif) center left no-repeat;
  display:inline-block;
  padding-left:20px;
  line-height:16px;
}
 
/* Excel-Links */
div#col2_content a[href$='.xls'], div#col2_content a[href$='.csv'], div#col2_content a[href$='.xlw'], div#col2_content a[href$='.xlt'] {
  background: url(/fileadmin/icons/file/xls.gif) center left no-repeat;
  display:inline-block;
  padding-left:20px;
  line-height:16px;
}
 
/* Word-Links */
div#col2_content a[href$='.doc'], div#col2_content a[href$='.rtf'], div#col2_content a[href$='.txt'] {
  background: url(/fileadmin/icons/file/word.gif) center left no-repeat;
  display:inline-block;
  padding-left:20px;
  line-height:16px;
}
 
/* mailto: Links */
div#col2_content a[href^="mailto:"]{
  background: url(/fileadmin/icons/file/mail_black.gif) center left no-repeat;
  display:inline-block;
  padding-left:20px;
  line-height:16px;
} 

/* Verschlüsselte mailto: Links */
div#col2_content a[href^="javascript:"]{
  background: url(/fileadmin/icons/file/mail_black.gif) center left no-repeat;
  display:inline-block;
  padding-left:20px;
  line-height:16px;
}
Icons vor Dateien die zum Donwload bestimmt sind.
War das Ihnen eine Hilfe? ein "LIKE" wäre ein tolles "Dankeschön"