Font Awesome für Navigationssymbole nutzen

Veröffentlichungsdatum: 21. Februar 2017
Änderungsdatum: 17. Oktober 2022

weblication cms base navigation symbole icons fonts awesome css

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 Classic, wie Sie Icons vor einen Navigationspunkt setzen können, ohne dabei Templates anpassen zu müssen.

Hinweis

Für die BASE (Mobile First) wird es ggf. ab Ende 2022 eine Umsetzung für Navigations-Icons auf Basis von SVG-Icons geben. Fragen Sie hierzu einfach per Ticket beim Support nach.

1. Font Awesome einbinden
2. Die Pflegemaske im Navigationseditor erweitern
3. Darstellung anpassen

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"/>

Den Link passen Sie je nach gewünschter bzw. aktuell verfügbarer Font Awesome Version an.
Ab Font Awesome Version 5 wurden übrigens die Klassennamen angepasst (anstatt fa z.B. fas oder far), was Sie beim Einsatz dieser Versionen beachten müssen!

2. Die Pflegemaske im Navigationseditor erweitern

Navigationsbearbeitung mit Feld für Font Awesome Klasse

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;/* ... */}