CSS: Eigene List-Styles mit Fontawesome-Icon erstellen

Auf vielen Websites spielen Listen eine wichtige Rolle um Informationen übersichtlich und schnell erfassbar darzustellen. Standardmäßig gibt es bereits einige Aufzählungszeichen, wie Rechtecke oder Kreise. Was aber, wenn man anstelle der altbackenen Standards ein Icon aus der populären Fontawesome-Bibliothek verwenden möchte?

Stellen sie zunächst sicher, dass die Fontawesome-Bibliothek auf ihrer Website geladen wird. Dies geschieht am einfachste mit einem Link im Header ihrer index.html. Der folgende Link bindet Fontawesome über MaxCDN ein.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">

Nun geht es an ihre CSS-Datei. Schreiben Sie für ihr <li>-Tag folgende Befehle:

li {
     padding-left: 20px;
}
li:before {
    content: '\f00c';
    font-family: FontAwesome;
    color: #009FE3;
    display: inline;
    width: 20px;
    margin-left: -30px;
    margin-right: 15px;
}​

Was passiert hier?

Zunächst geben sie jedem <li>-Tag in ihrer Liste einen Abstand nach links von 20px. Sollen die Listen-Elemente links bündig mit dem restlichen Text sein, setzen sie padding-left einfach auf 0.

Nun stellen sie mit li:before jedem Listen-Element ein eigenes Icon voran. In diesem Fall aus der Fontawesome-Bibliothek das Check-Icon. Die Breite des Icon entspricht dem Abstand des Listen-Elementes nach links. Zum nachfolgendn Text soll das Icon auch einen Abstand haben, in diesem Fall von 15px.
Zum Schluss heben sie mit margin-left: -30px den Padding-Abstand des gesamten Listen-Elements (zu dem auch das Icon gehört) wieder auf.


Das war es schon. Unter Fontawesome finden sie hunderte schicker Icons für fast jeden Geschmack. Suchen sie sich das passende aus, klicken in der Übersicht auf das entsprechende Icon und notieren sich auf der nachfolgenden Seite seinen Unicode.

fontawesome unicode

Den Unicode setzen sie in der CSS unter li:before in den Befehl content ein (wichtig: den \ nicht vergessen!).

  • 637
  • Letzte Änderung am Dienstag, 15 Dezember 2015 10:55
Mehr in dieser Kategorie: CSS3: Pseudo-Selektor :nth-child() »

Schreibe einen Kommentar

Bitte achten Sie darauf, alle Felder mit Stern * zu füllen. HTML-Code ist nicht erlaubt.

Heute69
Gestern372
Diese Woche69
Dieser Monat7643
Insgesamt215526

Who Is Online

4
Online

Montag, 25. September 2017 04:13

Rückrufservice

Kontaktdaten

dats
Druckagentur Torsten Scheel

Malvenweg 8
44289 Dortmund

Telefon: 0231 | 13 86 86 18
E-Mail:  kontakt@torstenscheel.de