Listen mit Font Awesome

(Kommentare: 2)

Eine Möglichkeit, individuelle Listenpunkte ohne Hintergrundbild zu kreieren, bietet Font Awesome, ein beliebter Icon-Webfont. Die Piktogramme, , Download, Anwendung und Beispiele findet man auf der Homepage von Font Awesome.

Icon-Fonts haben den Vorteil gegenüber pixelbasierten Grafiken, dass sie wie normale Schrift formatiert werden können, d.h., man kann den vektorbasierten Piktogrammen per CSS z.B. Farben und Größen zuweisen. So haben sie sich inzwischen auch schon als einfallsreiche Listenpunkte bewährt.

Diese werden über das Pseudoelement li:before eingebunden. Die Syntax wäre dann z. B. folgende:

ul {
   list-style-type: none;
}

li:before {
   font-family: FontAwesome;
   content: "\f0a9";
   padding-right: 10px;
}

[Natürlich muss das Paket heruntergeladen, auf den Server kopiert und die CSS-Datei im Kopfbereich eingebunden sein.]
Den Unicode erhält man auf der Webseite von Font Awesome, wenn man auf das gewünschte Priktogramm klickt. Die Syntax für die direkte Einbindung ist etwas anders, die Beispiele dazu hier. Aber für Listen in der Navigation z.B. innerhalb eines CMS bietet sich die Lösung mit den Pseudoelementen an.

Als Ergebnis hat man eine Liste mit schönen individuellen Listenpunkten:

Allerdings gibt es einen Nachteil: Bei mehrzeiligen Listenpunkten klappt die Einrückung nicht mehr. Dafür gibt es einen kleinen Trick. Man ergänzt das Listing für ul um folgende zwei Zeilen:

    padding-left: 1.5em;
    text-indent: -1.5em;

wobei der Abstand etwas ausprobiert werden muss. Und schon hat man eine schöne, eingerückte Liste.

 

PS: Der Internetexplorer unterhalb Version 8 kann diese Icons übrigens nicht darstellen.

Zurück

Einen Kommentar schreiben

Kommentar von Chris Alt |

Vielen Dank für die Tipps! Habe alles umgesetzt und bin begeistert!

Kommentar von Azragh |

Hm. Ich sehe, diese Lösung benötigt etw. weniger Code als meine.. Da der Standardwert von "text-indent" bei HTML-Elementen auf "inherit" steht, würde ich aber davon abraten diese Eigenschaft zu verwenden (somit müsste der einzug bei Child-Elementen der li's wieder auf 0 gesetzt werden).

Mit einem inline-block Element (mit fixierter Breite) und einem negativen margin lässt sich dies umgehen:

ul{
padding-left: 1.5em;
list-style: none;
}
ul > li:before{
font-family: FontAwesome;
content: "\f0a9";
display: inline-block;
width: 1.5em;
margin-left: -1.5em;
}

Antwort von Anika Strobach

Vielen Dank für den Hinweis!

Hinweis: In diesem Blog ist die Moderation von Kommentaren aktiviert. Es kann einen Moment dauern, bis der Kommentar veröffentlicht wird. Bitte den Kommentar nicht mehrmals absenden. Danke.