Font Awesome Icons im WordPress Menü verwenden

Font Awesome ist eine vektorbasierte Icon-Font, deren 634 Icons per CSS individualisiert werden können. Wie man die Icons der Schriftart auch in seinem WordPress-Menü verwenden kann, zeigen wir in diesem Artikel.

Getreu dem Motto „Viele Wege führen nach Rom“, gibt es selbstverständlich auch verschiedene Möglichkeiten, Font Awesome in WordPress zu integrieren bzw. im Menü zu verwenden.

Font Awesome per WordPress Plugin

Eine Möglichkeit ist die Integration per Plugin. Seit 2013 ist in der WordPress Plugin Repository ein inoffizielles Font Awesome Plugin erhältlich, das die Integration vereinfacht. Bis zu diesem Zeitpunkt stand aufgrund von Lizenz-rechtlichen Probleme kein Plugin zur Verfügung. Hier gibt es das Plugin „Font Awesome 4 Menus“ in der Plugin Repository.

Menü-Integration ohne Plugin

Wer auf die Nutzung von etwaigen Plugins verzichten möchte, kann auf die Bordmittel von WordPress zurückgreifen, um die Schriftart in das Menü zu integrieren. Voraussetzung ist natürlich, dass Font Awesome bereits in das gegenwärtig verwendete Theme implementiert wurde. Anschließend gilt es folgende Schritte zu befolgen:

1. Login im WordPress-Backend.
2. Gehe zu „Design“ -> „Menüs“.
3. Rechts oben befindet sich ein Button/Reiter namens „Ansicht anpassen“.
4. Dort den Haken unter „Erweiterte Menüeigenschaften anzeigen“ bei „CSS-Klasse“ setzen, sofern dies nicht schon geschehen ist.
5. Klappt man nun einen Menüpunkt aus, gibt es ein weiteres Feld, das zusätzliche CSS-Klassen für den jeweiligen Menüpunkt zulässt.
6. In diesem Feld können die entsprechenden Klassen für die Icons eingesetzt werden. Beispielsweise „fa fa-lg fa-home“.

CSS Anpassungen der Icons

Zu guter Letzt erfordert es noch ein wenig CSS, um die Icons korrekt im Menü zu positionieren.

.main-menu ul li {
	width: 100%;
}
.fa::before {
	float: left;
	margin-top: 8px;
	width: 30px;
}
.main-menu ul li.fa.fa-lg a {
	font-family: 'Roboto', serif;
	font-size: 0.8em;
}