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;