Hin und wieder beschleicht einen der Wunsch, das Design einer TYPO3 Webseite nicht nur mit Google Fonts aufzupeppen, sondern auch Symbole einzubinden. Sehr beliebt sind dafür die Symbole von Fonts Awesome, die es in einer kostenfreien und mit größerer Anzahl in einer kostenpflichtigen Version gibt.

Um die Fonts in der Webseite nutzen zu können, müssen wir Sie dem Browser verfügbar machen.

Die Einbindung der externen Quellen geht wie hier beschrieben per TypoScript:

page {
  includeCSS {
    css = https://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.

Um den Datenschutz unserer TYPO3 Webseite zu forcieren und die Zahl der Zugriffe auf Dateien zu verringern, ist es natürlich von Vorteil, wenn man das CSS lokal speichert. Die oben genannte Datei all.css kann man auf den lokalen Server herunterladen und ins eigene System einbinden. Dies ermöglicht zudem die Komprimierung und Verkettung aller CSS-Dateien.

Dazu ist es notwendig, mehr als nur ein Style Sheet herunterzuladen. Wenn man in den Quelltext der Datei all.css blickt, sieht man eine Menge relativer Verweise auf Font Dateien für verschiedene Plattformen und Browser sowie Precompiler. Um alle Ressourcen in einem Rutsch installieren zu können, gibt es die Möglichkeit, sich ein ZIP von der Font Awesome Webseite herunterzuladen:

Es ist ratsam, den Inhalt dieser gepackten Datei nun in ein eigenes Verzeichnis zu speichern, damit man die Übersicht in seinem Projekt wahren kann. Der Vorteil dabei ist, dass das CSS all.css nun die Dateien an den erwarteten relativ verlinkten Plätzen 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
  } 
}  

Nun können Sie sich das gewünschte Element nehmen und diesem über Ihr CSS ein Symbol aus der Font Awesome Bibliothek hinzufügen. Hier ist eine Anwendung für ein Zitat:

blockquote:before {
  font-family: "Font Awesome 5 free";
  font-weight: 900;
  content: "\f509";
  font-size: 1em;
  float: left;
  color: #0f0;
}  

In einem Partial für ein TYPO3 Template oder eine Extension können wir Font Awesome mit dem f:link viewhelper nutzen:

<f:link.external uri="https://www.facebook.de/" class="fab fa-facebook-square"></f:link.external>  

Hier z. B. die Einbindung eines Links zu Facebook mit dem entsprechenden Symbol.

Die oben stehende Standard Klasse fab für Font Awesome Brands können wir im CSS nutzen, um Icons selbst zu stylen. Hier haben wir den Link zu Facebook aus dem gerade geschilderten Beispiel:

a.fab {
  font-size: 2rem;
  text-decoration: none;
  color: #00f;
  transition: all ease 0.3s;
}

Den Link können wir uns nun über die Pseudo Klasse :hover nehmen und ihm mehrere Effekte zuweisen:

a.fab:hover {
  text-decoration: none;
  color: #f00;
  animation: turner 2s 1 linear;
  transition: all ease 0.5s;
}

Für die Animation nutzen wir nun einen Effekt, in dem wir die Icons mit CSS3 drehen:

@keyframes turner{
  from{  transform: rotateY(0deg)   }
  to  {  transform: rotateY(360deg) }
}

Wenn man die Font Awesome Zeichen nicht nur in der Programmierung der Webseite nutzen möchte, sondern diese auch im Fließtext nutzen will, lohnt es sich, eine Extension einzubinden. Mit RTE CK Editor für Font Awesome können wir den Editor um eine Schaltfläche erweitern, der uns die Auswahl von Font Awesome erlaubt.

Allerdings gibt es einen Nachteil:

• Wenn wir das Style Sheet für Font Awesome bereits eingebunden haben, ist dieses nun doppelt vorhanden.
• Wenn wir zudem das CSS für Font Awesome lokal eingebunden haben, wird dieses nun ein zweites Mal von der externen Quelle eingeladen.

Das muss nicht sein! Wir haben die Möglichkeit, der Extension über die Constants unseres Systems das Laden der externen Datei zu untersagen:

plugin.tx_ckeditor_fontawesome.loadCSS = 0

Damit speisen wir dann alle Font Awesome Darstellungen aus einer Quelle.

Beispiel für eine Animation mit Font Awesome in der Webseite unserer Agentur. Auf dieser Seite finden Sie eine weitere Beschreibung der Einbindung von Font Awesome für TYPO3.

Hier ein paar Links zur Webseite Fonts Awesome:

Extension zur Einbindung von Font Awesome in den CK Editor: