Font Awesome für Navigationssymbole nutzen
15. Jan 2015
Font Awesome lässt sich mit wenig Aufwand in Weblication integrieren. Der Artikel zeigt, welche Schritte notwendig sind.
Font Awesome stellt Fonticons über eine Schriftartendatei zur Verfügung. Diese lassen sich einfach über ein CDN oder vom eigenen Server nach dem Download laden. Sobald die Schriftsymbole geladen sind, können sie über CSS Content an beliebiger Stelle in einer Seite genutzt werden.
Im folgenden Beispiel zeige ich Ihnen, wie Sie Icons vor einen Navigationspunkt setzen können, ohne dabei Templates anpassen zu müssen.
1. Font Awesome einbinden
Als erstes binden Sie Font Awesome ein. Klicken Sie dazu auf Layout anpassen > Layoutwizard > Schriften > Schriften einbinden und fügen Sie dort folgenden Quelltext ein.
CSS-Datei mit Schriftdefinitionen über das CDN im Layoutwizard einbinden
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>2. Die Pflegemaske im Navigationseditor erweitern
Nun ist es notwendig dem Redakteur die Möglichkeit zu geben, pro Navigationspunkt zu definieren, welches Icon vor den Text gestellt werden soll. Öffnen Sie dazu die Navigationsbearbeitung und klicken Sie oben recht auf Diese Maske anpassen.
Das Pflegefeld für cssClass muss dort wie folgt definiert sein, damit es als Eingabefeld pflegbar ist.
Definition, um Awesome Font Icons auswählen zu können
<attribute name="cssClass" editor="input" valueSelected="" caption="Icon (z.B. fa fa-camera)" en:caption="Icon (e.g. fa fa-camera)" editable="1" levelsEditable="" />
Der Redakteur enthält nun ein zusätzliches Eingabefeld, in dem er die Icons über z.B. fa fa-camera eingeben kann. Sie können nach gleichem Prinzip auch eine Auswahlbox bereitstellen, und dort nur bestimmte Icons zur Auswahl anbieten.
3. Darstellung anpassen
CSS, um die Icons horizontal vor dem Navigationstext darzustellen
#navigationMain li.navLevel1.fa:before {position:absolute;margin:15px}
#navigationMain li.navLevel1.fa > a {padding-left:38px !important}
Nun werden die Icons vor den Text gestellt und können pro Navigationspunkt frei definiert werden.