Listen mit Font Awesome

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.