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"/>
Den Link passen Sie je nach gewünschter bzw. aktuell verfügbarer Font Awesome Version an.

2. Die Pflegemaske im Navigationseditor erweitern

Navigationsbearbeitung mit Feld für Font Awesome Klassezoom
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;/* ... */}
Navigations-Hauptpunkte mit Font Awesome Iconszoom
Navigations-Hauptpunkte mit Font Awesome Icons

Nun werden die Icons vor den Text gestellt und können pro Navigationspunkt frei definiert werden.

 
 

Weiterführende Links

fontawesome.io: Font Awesome, the iconic font and CSS toolkit
Online-Dokumentation: Bearbeiten einer Navigationsdatei

Suche-Schnellauswahl

backupbannerbasebildbildergaleriecachecookiescss-onlycss-picture-renderingdebugformularframeworklistelizenzmobile first basemultinavigationnewsletterpasswortpersonalisierungresponsiveseosicherheitsprachknotensslumbenennenumzugversandvideovolltextsucheweblicwsl

Allgemeines

RSS-Feed

Systemvorausssetzungen

Online-Dokumentation + Handbuch

Empfehlungen für den Einsatz von PHP

Versionshistorie

Support

Weblication® CMS Vorgängerversionen

Letzte Änderungen Framework / Pflegetags

Ähnliche Seiten

Entwicklerbereich Weblication® CMS - © Scholl Communications AG