Die beliebte Icon-Bibliothek Font Awesome ist mit wenigen Handgriffen in jedes Joomla-Template integriert. Einfach eine kleine Ergänzung im HTML-Head und Hunderte von Icons stehen über über das HTML-Tag <i class="fa fa-camera-retro"></i> zur Verfügung.
Font Awesome in eigene Websites integrieren
MaxCDN hostet die CSS-Datei, die notwendig ist, um die Icons auf einer Website verfügbar zu machen. Dazu wird also nichts in Joomla installiert, sondern es muss lediglich eine Zeile im HTML-Header ergänzt werden.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Soll kein CDN genutzt werden, laden Sie die CSS-Datei einfach in ein Verzeichnis der Joomla-Installation.
- Laden Sie zunächst das Font-Awesome-Paket hier herunter: Download-Seite von Font Awesome.
- Extrahieren Sie die Datei fontawesome.min.css aus dem /css/-Verzeichnis des ZIP-Archivs.
- Laden Sie die CSS-Datei in ein Verzeichnis auf Ihrer Website-Server (Der CSS-Ordner innerhalb des Template-Verzeichnisses bietet sich da an.)
- Fügen Sie eine Referenz zur CSS-Datei in den HTML-Header des Templates
<link rel="stylesheet" href="/templates/IHR-TEMPLATE/css/font-awesome.min.css">
Anwendung im HTML-Quelltext
Font-Awesome-Icons können an beliebiger Stelle im Content integriert werden. Wechseln Sie dazu in die Quelltext-Ansicht des Beitrags und fügen Sie z. B. folgenden Icon-Code ein:
<i class="fa fa-camera-retro"></i>
Wichtig sind dabei die CSS-Klassen des i-Tags: fa leitet das Font-Awesome-Icon generell ein, fa-xxx steht für das spezielle Icon, das dargestellt werden soll.
Die Liste aller Icons und ihrer fa-Bezeichnugen finden Sie auf der Font-Awesome-Website: http://fortawesome.github.io/Font-Awesome/icons/
Ebenso wie weitere Beispiele der Anwendung: http://fortawesome.github.io/Font-Awesome/examples/