Font Awesome Icons lokal in TYPO3 Webseite einbinden
Das Design einer TYPO3 Webseite können wir nicht nur mit Google Fonts aufzupeppen, sondern auch Icons einzubinden. Zu diesen Zweck sehr beliebt sind die Symbole der Schriftarten von Font Awesome, die es in einer kostenfreien und mit größerer Anzahl in einer kostenpflichtigen Version gibt.
Font Awesome in TypoScript Setup einfügen
Ähnlich wie bei einem Framework wie Bootstrap kann man die Sourcen für die Icons von Font Awesome über das Laden eines externen Style Sheets in die eigene Webseite einbinden. Diese Einbindung der externen Quellen können wir wie hier beschrieben per TypoScript erledigen:
page {
includeCSS {
css = use.fontawesome.com/releases/v5.8.1/css/all.css
css {
external = 1
media = all
excludeFromConcatenation = 1
}
}
}
Damit haben wir die Fonts Awesome Symbole zur Verfügung. Der Nachteil: Wir binden eine externe Quelle ein, geben damit die IP-Adresse der Besucher weiter und müssen dies in unserer Datenschutzerklärung angeben. Dieses Problem haben wir auch bei den Google Fonts, und genau wie bei diesem Problem gibt es hier eine Lösung.
Font Awesome über lokales Style Sheet einbinden
Den Datenschutz unserer TYPO3 Webseite zu verbessern ist ein Argument, weshalb man das Font Awesome CSS lokal laden sollte. Der andere Grund ist, dass man dieses Style Sheet verketten und komprimieren kann.
Dazu ist es notwendig, mehr als nur ein Style Sheet herunterzuladen. Wenn man in den Quelltext der oben eingebundenen Datei all.css blickt, sieht man eine Menge relativer Verweise auf Font Dateien für verschiedene Plattformen und Browser sowie Precompiler. Um alle Ressourcen gemeinsam auf unserem System installieren zu können, gibt es die Möglichkeit, sich ein ZIP von der Font Awesome Webseite herunterzuladen:
Um die Übersicht in seinem Projekt zu wahren, ist es ratsam, den Inhalt dieser gepackten Datei nun in ein eigenes Verzeichnis zu speichern. Der Vorteil dabei ist, dass das CSS all.css nun die Dateien an den erwarteten relativ verlinkten Plätzen findet in den benachbarten Verzeichnissen findet.
Die Einbindung der lokal gespeicherten Sourcen geht wie hier beschrieben per TypoScript:
page {
includeCSS {
css = EXT:provider/Resources/Public/awesome/css/all.css
css.media = all
}
}
Font Awesome in CSS nutzen
Nun können wir uns das gewünschte Element nehmen und diesem über das CSS ein Symbol aus der Font Awesome Bibliothek hinzufügen. Hier ist eine Anwendung für ein Zitat (HTML-Element <blockquote>):
blockquote:before {
font-family: "Font Awesome 5 free";
font-weight: 900;
content: "\f509";
font-size: 1em;
float: left;
color: #0f0;
}
Font Awesome mit Preload in TypoScript einbinden
Das Laden vor Ressourcen für eine Webseite verzögert sich natürlich, wenn Sie den Browser anweisen, eine Font Datei zur Darstellung von Schriften herunterzuladen. Im Rahmen von Maßnahmen zur technischen Suchmaschinenoptimierung in TYPO3 können Sie dies jedoch beschleunigen, wenn Sie den Browser anweisen, diesen Fonts bevorzugt herunterzuladen. Über die Preload Option weisen Sie den Browser an, bereits beim ersten Laden des Quellcodes der Seite mit dem Download der Fonts zu beginnen, bevor der Browser überhaupt die HTML- und CSS-Anweisungen interpretiert hat. Der TypoScript Code für diese SEO Maßnahme kann wie folgt aussehen:
page {
headerData {
30 = TEXT
30.wrap = <link
rel="preload"
href="/extension/Resources/Public/css/fonts/fa-regular-400.woff2"
as="font"
crossorigin>
}
}
Eine ausführliche Dokumentation der Preload Funktion finden Sie beim MDN:
Links zu Font Awesome
Im Wiki unserer Agentur haben wir weitere Informationen veröffentlicht, wie Sie Icons mit Font Awesome in Fluid Templates in TYPO3 einbauen und per CSS stylen sowie animinieren können:
Weitere Informationen zu Font Awesome und Downloads finden Sie in diesen Webseiten:
Font Awesome in CKEditor integrieren
Wäre es nicht toll, wenn man Font Awesome auch in den normalen CK Texteditor des TYPO3 Backend integrieren könnte? Nun, es gibt eine Lösung über eine Extension! Wenn man die unten verlinkte Erweiterung ins System einbaut, läft sich ein zusätzliches Element in den Editor und man kann an beliebiger Stelle ein Icon in den Fließtext setzen. Genauso sind die Icons in die Texte dieser Seite gekommen.