Einsatz von Font Awesome in phpBB 3.2

Kurzbeschreibung:
Überblick und Verwendung von Font Awesome in phpBB 3.2

Tags:
Allgemeines/Grundlagen, Templates und Styles
Keywords:
Awesome, Font
Awesome Font Eines der neuen Features in phpBB 3.2 ist die Integration der Font Awesome Icon-Font-Bibliothek.
Dieser Artikel soll einen kurzen Überblick darüber geben, was FA ist und wozu bzw. wie es eingesetzt werden kann.


Was ist "Font Awesome"?

Font Awesome (FA) ist eine umfangreiche Sammlung von Icons im verlustfrei skalierbaren Vektorformat, die sich, analog zu Schriften, frei mittels CSS formatieren lassen.
Die Sammlung, wie sie auch in phpBB 3.2 integriert ist, umfasst neben den in Fonts organisierten Icons selbst auch das der verwendeten Version zugehörige CSS-File mit den grundlegenden FA-Klassen zur Formatierung.

Sie ersetzen in weiten Teilen von phpBB die bisher üblichen Icon-Grafiken.
phpBB 3.1.:
Bild
phpBB 3.2.:
Bild

Vorteil: keine Qualitätsverluste bei Skalierung; vereinfachte Formatierungsmöglichkeiten durch vordefinierte Standard-Klassen; freie und individuelle Formatierung im Rahmen der Möglichkeiten von CSS.

Aktuell in phpBB integriert (Stand: 3.2.0) ist die Version 4.4.0 mit ca. 600+ Icons.

Wie finde ich ein passendes Icon?

Eine Aufstellung aller in der aktuellen Version von FA enthaltenen Icons mit deren CSS-Klassen ist auf der Herstellerseite im alphabetisch sortierten Cheatsheet zu finden - alternativ und thematisch sortiert auf der Seite der Icon-Übersicht.

Bitte beachten:
Beide verlinkten Seiten präsentieren die Sammlung im jeweils aktuellen Versionsstand (z.Z. 4.6.3), der von dem in phpBB integrierten abweichen kann!
Icons, die erst in späteren als der in phpBB integrierten Version hinzugefügt wurden, können hier nicht eingesetzt werden. Sie lassen sich allerdings anhand der Versionsangaben in den beiden Übersichten leicht identifizieren.


Verwendung der FA Icons

Das prinzipielle Vorgehen sowie der allgemeine Aufbau bzw. die Syntax lassen sich analog auch auf andere Einsatzbereiche übertragen. Beispiele hierfür: in Template-Events bzw. den Event-Files von Extensions; beim nachträglichen Umstellen ursprünglich grafikbasierter Links auf FA etc. (Zur Thematik "Extensions" siehe auch die entsprechenden KB-Artikel.)

Das Vorgehen wird nachfolgend am Beispiel des manuellen Einfügens eines Links "Bildersammlung" mit FA-Icon einer Kamera rechts des Menüpunktes "MCP" in der "navbar_header.html" von prosilver dargestellt:.

a) Einfügen des Links:
- öffne <phpbb_root>/styles/prosilver/template/navbar_header.html
- suche
Code: Alles auswählen
      <!-- IF U_MCP -->
         <li data-last-responsive="true">
            <a href="{U_MCP}" title="{L_MCP}" role="menuitem">
               <i class="icon fa-gavel fa-fw" aria-hidden="true"></i><span>{L_MCP_SHORT}</span>
            </a>
         </li>
      <!-- ENDIF -->

- füge danach in neuer Zeile ein:
Code: Alles auswählen
         <li>
            <a href="#" title="zur Bildersammlung" role="menuitem">
               <i class="icon fa-camera-retro fa-fw" aria-hidden="true"></i><span>Bildersammlung</span>
            </a>
         </li>

b) Zum Abschluss noch speichern und den Style-Cache leeren.
Ergebnis:
Bild


Grundlegende Syntax

:
Die Icons werden über das <i> Tag in Verbindung mit der jeweiligen Klasse/Klassenkaskade eingebunden. Zur Bedeutung der wichtigsten Selektoren:
  • icon: muss immer vorangestellt werden - ersetzt bei Links funktional die Klasse "fa" der originalen FA-Syntax, modifiziert für phpBB
  • fa-camera-retro: identifiziert das anzuzeigende Icon - zu ermitteln wie unter (2) beschrieben
  • fa-fw: zusätzliche Formatierungsvorschrift für das Icon. In diesem Falle "fixed width", definiert im FA-CSS-File. Sorgt für eine einheitliche Weite aller so gekennzeichneten Icons.
  • aria-hidden="true": verhindert die Sprachausgabe durch z.B. Screen Reader und sollte daher bei rein dekorativ verwendeten Icons immer gesetzt werden.

Zusätzliche Formatierungen können bei Bedarf hinzugefügt werden. Für eine kurze Übersicht der verschiedenen Möglichkeiten siehe auch Examples auf der Font Awesome Homepage.


  • Ähnliche Artikel
    Relevanz
    Zugriffe
    Zuletzt bearbeitet
  • Template-System von phpBB
    Dieser Artikel beschreibt, wie das von phpBB verwendete Template-System funktioniert
    4.2
    40774 Zugriffe
    Zuletzt bearbeitet von Lehrling
    20.01.2017 19:54
  • Das phpBB Copyright
    Antworten zu den häufig gestellten Fragen zum phpBB Copyright und zur phpBB Lizenz
    3.8
    62033 Zugriffe
    Zuletzt bearbeitet von AYYILDIZLAR
    06.02.2014 17:35
  • Aufbau der phpBB-Versionsnummern
    Warum heißt phpBB 2.1 "2.1" und nicht "2.0.7"? Hier ist das Nummerierungsschema der phpBB-Versionen beschrieben.
    3.8
    13716 Zugriffe
    Zuletzt bearbeitet von gn#36
    04.04.2015 15:11
  • Gesucht, gefunden - Mods & Co für phpBB
    Eine Liste mit Seiten wo man Mods / Grafiken / Styles / Themes / Sprachdateien zum Download finden kann
    3.7
    165285 Zugriffe
    Zuletzt bearbeitet von BlackHawk87
    14.06.2014 23:45
  • phpbb3 - Was bei Änderungen an Sprachdateien beachtet werden muss!
    Das Speichern von Sprachdateien muss im Format UTF-8 ohne BOM erfolgen.
    3.0
    33306 Zugriffe
    Zuletzt bearbeitet von AYYILDIZLAR
    13.03.2014 02:00