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.

Icons vor Dateien die zum Donwload bestimmt sind.
/* 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;
}
War das Ihnen eine Hilfe? ein "LIKE" wäre ein tolles "Dankeschön"