FontAwesome lokal in Divi einbinden und über CSS verwenden

Date/time:
Lesezeit: 4 Minuten, 8 Sekunden

Im Zuge der DSGVO kommen Google WebFonts und auch die Icons des FontAwesome WebFonts immer wieder auf den Tisch.

Sollte man sie jetzt lokal einbinden oder nicht? Diese Frage kann ich Euch leider nicht beantworten. Das werden Gerichte beurteilen müssen.

Fakt ist das bei einem externem Aufruf eines Google WebFonts oder auch eines FontAwesome WebFonts (Icon), Daten (mindestens die IP-Adresse als personenbezogenes Datum) wiederum an Google und FontAwesome übermittelt werden.

Daher ist diese Anleitung keine Empfehlung, sondern vielmehr eine Hilfe wie ihr (und die etwas fortgeschritteneren Divi User) in Divi (und im Grunde auch mit jedem anderen Theme) zumindest die FontAwesome WebFonts, lokal einbinden könnt und Eure CSS Angaben entsprechend erweitert, damit diese auch funktionieren.

Das erwartet Euch:

  • Bestandsaufnahme – Verwendet ihr FontAwesome überhaupt und wenn ja, wie?
  • Verbindung zu FontAwesome in Divi kappen
  • FontAwesome WebFonts runterladen
  • FontAwesome WebFonts per FTP auf den Server laden
  • Pfad zum FontAwesome Ordner in den Divi Header einsetzen
  • CSS Angaben anpassen

Für das lokale Einbinden von Google WebFonts kann ich Euch den Beitrag von WP Ninjas empfehlen: https://wp-ninjas.de/wordpress-google-fonts

Divi selbst kommt mit eigenen lokalen Icon Schriftarten. Nur manchmal reichen diese nicht aus und es wird auf das WebFont FontAwesome und dessen Icons zurückgegriffen um das Theme über benutzerdefiniertes CSS noch etwas hübscher zu gestalten. Die meisten dürften es über folgenden (oder ähnlichen) Code im Header Bereich realisiert haben:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

Was aber wenn man FontAwesome für Icons lieber lokal einbinden möchte? Dann braucht es ein paar (machbare) Schritte mehr.

Was braucht ihr?

  • Zugriff auf das WP Backend, sprich das Dashboard und die Divi Einstellungen
  • Einen FTP Zugang zu Eurem Webserver, mit der Möglichkeit Dateien hochzuladen
  • Im besten Fall ein Divi Child Theme

1. Bestandsaufnahme

Zu aller erst einmal checkt ob überhaupt FontAwesome Icons extern reingeladen werden. Hierzu ist das Entwicklerwerkzeug von Firefox (oder auch von Chrome) Eure erste Wahl.

Geht auf Netzwerkanalyse und aktualisiert Eure Seite. Wenn ihr FontAwesome extern reinholt, dann werdet ihr unter Host ein paar externe Domains zu fontawesome.com finden, wie in diesem Beispiel:

Firefox Entwicklerwerkzeug nach fontawesome Host suchen

2. Externe Verbindung zu FontAwesome in Divi kappen

Unter Divi -> Theme-Optionen -> Integration -> Code dem < head > Ihres Blogs hinzufügen folgendes (oder ähnliches) suchen und löschen:

<script src="https://use.fontawesome.com/xxx.js"></script>
<link href="https://use.fontawesome.com/releases/vxxx/css/all.css" rel="stylesheet">

Divi -> Integration im Headerbereich anzeigen

Damit wäre nun die Verbindung zu FontAwesome erst einmal unterbrochen. Nichts funkt mehr in diese Richtung.

3. Fehlanzeige

Jetzt dürften sich folgende Fehler in dieser Art und Weise zeigen, denn der WebFont (font-family) FontAwesome wird nicht mehr gefunden und der UniCode im CSS kann nicht mehr interpretiert werden:

FontAwesome Fehlanzeige

Der CSS Code dazu sieht so aus:

Alter CSS FontAwesome Code

content: "\f107";  /*ist der Unicode des Icons*/
font-family: "FontAwesome"; /*der alte FontAwesome WebFont*/

4. FontAwesome lokal einbinden

Jetzt holen wir uns FontAwesome lokal auf die Seite.

  • Dazu geht ihr auf https://fontawesome.com/ und klickt dort auf Download Free und speichert die *.zip Datei bei Euch lokal ab.
  • Dann öffnet ihr die soeben runtergeladene *.zip Datei und entpackt die Dateien.
  • Jetzt öffnet ihr Euer FTP Programm.
    Ich verwende hierfür das kostenlose FileZilla.

Erstellt auf Eurem Webserver (rechts) unter Eurem Divi Child Theme, einen neuen Ordner fonts und darunter den Ordner fontawesome. Dann schiebt in diesen die beiden entzippten Ordner css und webfonts, unter „web-fonts-with-css“, rüber.

FontAwesome per FTP auf Webserver uploaden

Jetzt wechselt ihr wieder in Euer WordPress Dashboard -> Divi -> Theme Optionen -> Integration und tragt hier folgendes ein:

<link href="https://deinedomain.de/wp-content/themes/Divi-child/fonts/fontawesome/css/fontawesome-all.css" rel="stylesheet">

https://deinedomain.de und auch das Divi-child müsst ihr natürlich durch Eure Domain und dem Namen Eures Divi Child Themes ersetzen.

FontAwesome lokal über Divi -> Integration im Headerbereich einbinden

Geht jetzt unter Divi -> Theme Optionen -> Benutzerdefinierte CSS und sucht nach „FontAwe“

Benutzerdefinierte CSS - Alte CSS Angabe für FontAwesome suchen

Jetzt tauscht ihr das: font-family: „FontAwesome“ durch font-family: „Font Awesome 5 Free“ aus und ergänzt:

font-weight: 900;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;

Am Ende sieht der Code nun so aus:

CSS Angaben durch neue Font Awesome Free Angaben austauschen

und das FontAwesome Icon erstrahlt lokal im neuen Glanz:

FontAwesome funktioniert wieder

Zu beachten:

Wenn ihr Marken Icons verwendet wie z.B. von Twitter, Youtube usw. dann schreibt

  • statt „Font Awesome 5 Free„, dann „Font Awesome 5 Brands“ und
  • statt „900„, dann „400

Die Unicodes, also z.B. \f107 für content, findet ihr unter diesem Link: http://fontawesome.com/icons?d=gallery&m=free. Es kann sein dass sich der UniCode mit FontAwesome 5.0 geändert hat.
Achtet bitte auch darauf dass ihr keine FontAwesome Pro Icons verwendet. Diese unterliegen eigenen Lizenzbestimmungen und sind nicht kostenfrei.

5. Die letzten Worte

Ich hoffe die Anleitung ist selbsterklärend und auch dass damit wirklich kein Funk mehr zu FontAwesome stattfindet. Sollte ich mich irren dann sagt mir gerne Bescheid.

Veröffentlicht von: Marjeta Prah-Moses

Seit 2009 selbständig, ist Wordpress nun seit über sieben Jahren meine Leidenschaft. Von Entrepreneure, über Grafiker, bis zu den kleinen, mittelständischen Unternehmen, unterstütze ich alle die sich auf den Weg zur eigenen Website machen.

Categories: Divi Tricks/Wordpress

3 Comments

  1. Danke Marjeta für diese Anleitung, damit hat es bei mir auch super geklappt. Ich hatte die Fonts direkt eingebunden, z.B. so

    Damit hat es gleich geklappt, nachdem ich unter Integration des Code entsprechend eingetragen hatte und ich musste nichts weiter anpassen ;-)

    Es macht ein wenig mehr Arbeit, aber das lässt sich verschmerzen ;-)

    Lieben Gruß und Danke
    Irene

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.