Font-Awesome-Integration

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.

  1. Laden Sie zunächst das Font-Awesome-Paket hier herunter: Download-Seite von Font Awesome.
  2. Extrahieren Sie die Datei fontawesome.min.css aus dem /css/-Verzeichnis des ZIP-Archivs.
  3. Laden Sie die CSS-Datei in ein Verzeichnis auf Ihrer Website-Server (Der CSS-Ordner innerhalb des Template-Verzeichnisses bietet sich da an.)
  4. 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/

Handbuch lesen

Infos zum Joomla-Handbuch, Inhaltsübersichten und Leseproben finden Sie auf dieser Webseite des Rheinwerk Verlags.

Oder natürlich bei Amazon:

Handbuch empfehlen

Sponsoren