Font-awesome

Aus Contao Community Documentation


Erweiterungs-Übersicht
Name des Entwicklers David Molineus http://www.netzmacht.de
Version der Erweiterung 2.1.0-rc3
Kompatibilität mit Contao Version 3.0.0 - 3.0.1
Link zum Extension Repository https://contao.org/de/extension-list/view/font-awesome.html
Link zum Tracker https://github.com/dmolineus/contao-font-awesome


Allgemeines

Die Erweiterung font-awesome bindet die Iconschriftart Font-Awesome[1] in Contao ein. Nach der Installation befindet sich unter /assets/ der Ordner font-awesome. Die grundsätzlichen Vorteile von Iconschriftarten sind unter anderen hier[2] beschrieben.

Außerdem integriert diese Erweiterung die Icons in das Backend von Contao. Dazu muss dies entweder unter System -> Einstellungen -> Backendeinstellungen "Font Awesome systemweit verwenden" aktiviert werden. Ist dies nicht systemweit aktiviert, so kann dies unter den Benutzereinstellungen unter Backend-Theme individuell aktiviert werden.

Die Ersetzung der Standardicons arbeitet sowohl im serverseitig als auch clientseitig mit Javascript. Aktuell werden lediglich die Navigationsicons serverseitig ersetzt.

Font-Awesome in eigenen Erweiterungen

Icons registrieren

Die Erweiterung bietet eine allgemeine Schnittstelle, sodass andere Erweiterungen ihre Icons registrieren können. Diese werden in der Konfigurationsvariable $GLOBALS['ICON_REPLACER'] gespeichert. Es werden fünf verschiedene Bereiche definiert, in denen Icons ersetzt werden können:

$GLOBALS['ICON_REPLACER']['header'] = array(); // Icons im Header, wie das Refresh oder User Icon
$GLOBALS['ICON_REPLACER']['buttons'] = array(); // Icons innerhalb von .tl_buttons (globale Operationen)
$GLOBALS['ICON_REPLACER']['context'] = array(); // Icons die zeilenweise ausgegeben werden (innerhalb von .tl_*_right*)
$GLOBALS['ICON_REPLACER']['pushided'] = array(); // Navigationsicons
$GLOBALS['ICON_REPLACER']['navigation'] = array(); // Icons der Backendmodule in der linken Navigation

Da Contao Icons entweder als CSS-Klasse definiert oder als Bilddatei lädt, existieren zwei Möglichkeiten die zu ersetzenden Icons zu definieren. In einem Array wird dann das neue Icon (Font-Awesome verwendet die Syntax icon-name, wobei lediglich name angegeben werden muss) und die zu ersetzende CSS-Klasse bzw. der zu ersetzende Dateiname:

$GLOBALS['ICON_REPLACER']['context']['imageIcons'][] = array('pencil', 'edit.gif');
$GLOBALS['ICON_REPLACER']['navigation']['styleIcons'][] = array('pencil', 'article');

An einem konkreten Beispiel der Cloud API Erweiterung sieht dies dann folgendermaßen in der config.php aus:

$GLOBALS['ICON_REPLACER']['navigation']['styleIcons'][] = array('cloud', 'cloudapi');
$GLOBALS['ICON_REPLACER']['context']['imageIcons'][] = array('refresh', 'sync.gif');
$GLOBALS['ICON_REPLACER']['buttons']['styleIcons'][] = array('retweet', 'header_mount');
$GLOBALS['ICON_REPLACER']['context']['imageIcons'][] = array('folder-open', 'mount.png');

Font-Awesome erzwingen

Neben der nutzerseitigen Konfiguration kann eine Erweiterung auch die Verwendung von Font-Awesome erzwingen. Dies ist beispielsweise bei einer Backend-Theme sinnvoll, das auf dem Iconset basiert. Dazu muss in der config.php der Erweiterung lediglich die entsprechende Variable konfiguriert werden. Die Benutzer- und Systemeinstellungen werden dann ignoriert. Die Benutzereinstellungen werden dann außerdem versteckt:

$GLOBALS['TL_CONFIG']['forceFontAwesome'] = true;
Ansichten
Meine Werkzeuge

Contao Community Documentation

Nein, der Hangout ist noch nicht vorbei, wir schweigen nur. Es heisst ja auch hangout und nicht bryll out.

Christian Schiffler
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge