phpBB.de

Link zu diesem Artikel: Alles auswählen

[url=https://www.phpbb.de/kb/viewarticle?a=20]Knowledge Base - Einsatz von Font Awesome in phpBB 3.2 / 3.3[/url]

Eines der neuen Features ab 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 ab 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.3.0) ist die Version 4.7.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.