Das kostenlose Plugin NS Font Awesome für Joomla 2.5.x und 3.x erlaubt die Einbindung hunderter von skalierbaren Vektor Icons. Mit den vielfältigen Möglichkeiten von Cascading Stylesheets können alle Icons ganz individuell angepasst werden. So ist es jederzeit möglich, Größen und Farben zu ändern, oder einen Schlagschatten zu definieren.
Pure CSS Icons!
Die Zahl der kostenfreien guten Erweiterungen für Joomla wird leider immer überschaubarer. Da ist das Plugin NS Font Awesome ein echter Lichtblick.
Die Erweiterung für Joomla 2.5.x und 3.x bietet jede Menge Auswahl an Icons für diverse Bereiche wie Web Applikationen, Formulare, Währungen, Text Editor, Richtungspfeile, Video Player, Marken und Medizin. In Font Awesome 4.0.3 sind es derzeit 369 Icons.
Es handelt sich wirklich nur um skalierbare Vektorgrafiken, welche alleine durch CSS-Klassen eingebunden werden können. Pixelbilder werden hier ebenso wenig verwendet wie JavaScript. Neben der Angabe der jeweiligen Klasse für das entsprechende Icon, können zusätzlich sämtliche CSS-Eigenschaften für eine individuelle Darstellung genutzt werden. So entstehen vielfältige Möglichkeiten.
Die Installation des Plugins ist für beide genannten Joomla-Versionen unkompliziert und schnell erledigt und verläuft völlig fehlerfrei. Nach der Installation ist NS Font Awesome im Backend unter Erweiterungen -> Plugins zu finden. Dort muss es nur aktiviert werden. Weitere Einstellungen sind nicht durchzuführen.
Im Prinzip könnte man jetzt schon einen Beitrag erstellen und dafür die neuen Möglichkeiten nutzen. Allerdings wird es mit den meisten Joomla Editoren zu Problemen kommen. Die Editoren entfernen aus Sicherheitsgründen oft Skript-Tags beim Speichern des Dokumentes.
Bei manchen Editoren kann dies eventuell in den Einstellungen geändert werden. Falls hier nichts hilft, müsste man den Editor in Joomla zumindest vorübergehend deaktivieren, so daß nur noch die Eingabe von Quellcode bei der Beitragserstellung möglich ist. Das ist aber auch schon das einzige Dumme an der ganzen Sache. Wer seine Artikel ohnehin in einem externen Editor wie zb. Dreamweaver oder Notepad++ usw. schreibt, der wird sich nicht sehr daran stören müssen.
Nun kann auch schon ein mit ansprechenden Icons aufgewerteter Artikel verfasst werden. Es ist wirklich ganz einfach. Hier einmal ein Beispiel-Code für eine Überschrift und ein Kamera Icon.
Der Entwickler des Plugins schlägt vor, hier ein i-Tag zu verwenden. Allerdings funktioniert das Ganze ebenso mit einem normalen p-Tag oder auch einem Überschriften-Tag wie zb. H1. Wichtig ist also nur die verwendete Klasse, welche immer mit "fa" beginnt und sich dann je nach gewünschtem Icon ändert.
Bei diesem einfachen Code würde das Ergebnis ohne die Überschrift etwa so aussehen:
Auch dieses schlichte Aussehen hat schon seinen Reiz. Allerdings geht noch sehr viel mehr. Da schon die Einbindung der Icons über eine einfache CSS-Anweisung im HTML-Code funktioniert, lassen sich die Definitionen sehr schnell weiter ausbauen. Zusätzlich zur Angabe einer Klasse, wird einfach noch ein oder mehrere Style-Attribute angegeben.
Hier wurde also zusätzlich noch eine Schriftfarbe und eine Schriftgröße definiert, was dann so aussieht:
Und natürlich kann hier auch eine Angabe in Kurzform für die Farbe oder andere Dinge verwendet werden. Also zb. 000 für Schwarz. Es wird wirklich nur ganz normales CSS angegeben, welches sich stets auf das Icon und auf den Text innerhalb des Tags auswirkt.
Bei manchen Icons könnte innerhalb der Class hinten angehängt die Größe auch durch "fa-1" bis "fa-6" geändert werden. Also zb. class="fa fa-bar-chart-o fa-3".
Somit ist es natürlich überhaupt kein Problem, auch einen Innenabstand und eine Hintergrundfarbe zu vergeben.
Damit käme dann folgendes Ergebnis heraus:
Das sind jetzt nur einige wenige Beispiele. Um andere Icons einbinden zu können, muß man jetzt nur die jeweilige Bezeichnung der CSS-Klasse wissen. Diese Bezeichnungen inklusive einer Darstellung der Icons können der Website des Entwicklers unter fontawesome.io/icons/ entnommen werden.
Ein Klick auf ein Icon öffnet eine neue Seite mit Beispielcode, welchem die Klasse zu entnehmen ist. Der Code kann hier also leicht kopiert und in den Joomla-Editor eingefügt werden. Dort kann er dann nach Belieben mit weiteren Styles versehen werden.
Für eine leicht zu kopierende Übersicht ohne Beispielcode bietet der Entwickler ein Font-Cheatsheet. Dort sind alle Icons mit Klassen und Unicode gelistet.
Hier geht es zum NS Font Awesome Download. (Link funktioniert nicht mehr und wurde entfernt)
