Font Awesome für Navigationssymbole nutzen
21. Feb 2017
Navigationspunkte können Sie über Symbole (z.B. Fonticons) ohne grossen Aufwand ansprechend gestalten.
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 zeigen wir auf Basis der BASE, 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.7.0/css/font-awesome.min.css" rel="stylesheet"/>
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 rechts auf Diese Maske anpassen.
Das (in der BASE Projektbasis schon vorhandene) 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="1" />Das Beispiel begrenzt die Pflege auf die Hauptnavigationspunkte (levelsEditable="1").
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} /* ... */ /* ggf. müssen Sie den a-Tags der Navigation allgemein die Default-Schriftart konkret mitgeben, da diese sonst von der Font Awesome Schriftart gezogen wird: */ #navigationMain li.navLevel1 > a {font-family:$fontFamilyDefault;/* ... */}
Nun werden die Icons vor den Text gestellt und können pro Navigationspunkt frei definiert werden.