CSS: Links mit Datei-Icon ergänzen

Um einem Link ein Icon hinzufügen gibt es verschiedene Möglichkeiten. JavaScript, Prefilter und CSS. Die CSS Möglichkeit möchte ich hier ein wenig näher Betrachten.

Vorab: IE6 unterstützt dies nicht.

Unter CSS2/CSS3 gibt es sogenannte Attribut-Selektoren. Attribut-Selektoren sind Teil der CSS2/CSS3 Spezifikation und extrem effektiv. Sie erlauben Dinge, die man bis jetzt nur mit Javascript machen konnte.

Die Attribut-Selektoren beziehen sich auf die Attribute von Elementen. Man kann diese Attribute (im Beispiel fett geschrieben) direkt ansprechen, auswerten und die Darstellung der dazugehörigen Elemente spezifisch definieren.
Beispiel: <a href=”“ title=”“> oder <img alt=““ src=”“ alt=”“ />

Folgende Operatoren zum Auswerten der Attribute gibt es. Als Beispiel nehmen wir hier den href Attribut einens Links. <a href=“foobar>www.camma.ch</a>

a[title]
Passt auf ein Element a mit dem Attribut title.

a[href=“foobar“]
Passt auf ein Element a mit Attribut href und dem exakten Wert foobar.

a[href~=“foobar“]
Passt auf ein Element a mit Attribut href, dessen durch Leerzeichen getrennte Liste von Werten foobar enthält. Würde auch auf den Attribut-Wert „foobar baz blah“ zutreffen.

a[href|=“foobar“]
Passt auf ein Element a mit Attribut href, dessen durch Trennstriche (-) getrennte Liste von Werten foobar enthält.

a[href^=“foobar“]
Passt auf ein Element a mit Attribut href, dessen Wert mit foobar beginnt. Würde auch auf den Attribut-Wert foobarabo zutreffen.

a[href$=“foobar“]
Passt auf ein Element a mit Attribut href, dessen Wert mit foobar endet. Würde auch auf den Attribut-Wert abofoobar zutreffen.

a[href*=“foobar“]
Passt auf ein Element a mit Attribut href, dessen Wert foobar an beliebiger Stelle in der Zeichenkette enthält.

Beispiel für Datei-Icons


/* PDF-Links */
a[href$=‘.pdf‘] {
background: url(../images/icon-pdf.gif) center left no-repeat;
padding-left:20px;
line-height:16px;
}
/* Excel-Links */
a[href$=‘.xls‘], a[href$=‘.csv‘], a[href$=‘.xlw‘], a[href$=‘.xlt‘] {
background: url(../images/icon-excel.gif) left center no-repeat;
padding-left:20px;
line-height:16px;
}
/* Word-Links */
a[href$=‘.doc‘], a[href$=‘.rtf‘], a[href$=‘.txt‘] {
background: url(../images/icon-word.gif) left center no-repeat;
padding-left:20px;
line-height:16px;
}
/* Zip-Links */
a[href$=‘.zip‘], a[href$=‘.rar‘], a[href$=‘.gzip‘] {
background: url(../images/icon-zip.gif) left center no-repeat;
padding-left:20px;
line-height:16px;
}

Externe Links / mailto:


/* mailto: Links */
a[href^=“mailto:“], a[href*=“UnCryptMailto“] {
background: url(../images/icon-mailto.png) left center no-repeat;
padding-left:20px;
line-height:16px;
}
/* externe: Links */
a[href^=“http://“] {
background: url(../images/icon-extern.png) right center no-repeat;
padding-right:15px;
}

Natürlich kann man auch externe Links oder mailto: Links kennzeichnen. Da ich die JavaScript Funktion UnCryptMailto nutze, habe ich auch diesen Teil integriert.

Quellen

http://www.w3.org/TR/css3-selectors/

Für IE6 gibt es die Möglichkeit von jQuery:
Rebecca Murphy

Related Posts:

7 thoughts on “CSS: Links mit Datei-Icon ergänzen

  1. Hi, könntest du mal eine Demo dazu machen? Würde mich mal interessieren wie das in „echt“ aussieht.
    liebe Grüße von deinem nun neuem Leser Paloran

  2. Vielen Dank für die nützlichen Hinweise. Es war in der Vergangenheit tatsächlich immer sehr schwierige verschiedene icons vor diversen Links zu setzen. So ist es perfekt. Ich habe diesen Tip das erste mal in einem Beitrag auf meinem Blog umgesetzt. Selbstgemachte Social Media Button
    Viel Spaß im Biz

  3. Offiziell sollte man für die background-Position „left center“ angeben und nicht „center left“, auch wenn die Browser das trotzdem verstehen. Immer erst X, dann Y. Ansonsten vertauscht man das später auch, wenn man px- oder %-Angaben macht. 🙂

  4. Bei mir hat er mit den `Anführungszeichen` gesponnen aber ‚diese‘ haben funktioniert!

Kommentare sind geschlossen.