Skip to main content

Wie du mit nur 2 Zeilen Code FontAwesome lokal einbindest

Veröffentlicht am 26. Juli 2021

Beitrag teilen:

Manchmal muss FontAwesome lokal eingebunden werden.
Wer die Icon-Bibliothek FontAwesome jetzt noch nicht kennt und verwendet hat wirklich was verpasst.
Mit über 1600 Icons in über 70 Kategorien, sowohl für den Desktop als auch für Websites, ist das Open-Source-Projekt eine der größten kostenfreien Icon-Sammlungen unserer Zeit.
Aber die Einbindung der Icons über das Content-Delivery-Network (CDN) von FontAwesome ist nicht DSGVO-Konform – somit bleibt nichts anderes übrig als die Icons selbst auf dem Webspace lokal zu hosten.
Ich gehe hierbei ausschließlich auf die Einbindung auf Websiten (ohne und mit WordPress) ein.

Im Folgenden erfährst  du, wie das ganz einfach mit kaum Aufwand super leicht umsetzen kannst.

Bevor wir richtig beginnen, musst du

Die Icon-Sammlung herunterladen

Lade die aktuelle Datei einfach unter https://fontawesome.com/start herunter. Wähle dort „Download“ und lade die .zip-Datei auf der folgenden Seite herunter.
Anschließend entpacke Sie in einen Ordner deiner Wahl.

Wie du FontAwesome lokal ohne WordPress auf deiner Website einbinden kannst

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

1. Hochladen der Icon-Sammlung auf den Webspace

Erstelle nun einen Ordner auf deinem Webspace, also der ersten Ebene (dort, wo die index.html liegt). In meinem Beispiel nenne ich ihn „fonts“.
In diesem Ordner erstellst du am besten einen weiteren Ordner und nennst ihn „fontawesome“.
Dort hinein lädst du die eben entpackten Ordner „css“ und „webfonts“.

Die Struktur des Webspaces sollte nun so aussehen:

Struktur des eben angelegten Font-Ordners

2. Einbinden der Icons in den Code

Damit FontAwesome lokal korrekt geladen wird, reicht eigentlich eine einzige Zeile Code im head:

<link rel="stylesheet" href="/fonts/css/all.min.css" />

Bitte achte hierbei drauf, den Pfad entsprechend anzupassen falls dein fonts-Ordner sich wo anders befindet.

In einem bestehenden head-Bereich würde dies dann eingebunden so aussehen:

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Test</title>
      
   <link rel="stylesheet" href="/fonts/fontawesome/css/all.min.css" />
</head>

3. Einfügen der Icons

Um ein Icon anzuzeigen suche dir auf https://fontawesome.com/ oben auf „Icons“ ein Icon raus. Ich werde im Beispiel „github“ verwenden.
Klicke nun das gewünschte Icon an. Oberhalb des Icons hast du nun ein HTML-Element, welches du per Klick kopieren kannst:

Fontawesome Icon Code kopieren

Füge den Code nun auf der gewünschten Stelle im body deiner HTML-Datei ein:

<body>
   <i class="fab fa-github-square"></i>
</body>

Das Icon sollte nun korrekt auf deiner HTML-Seite angezeigt werden.

Wie du FontAwesome lokal in deinem WordPress-Theme einbinden kannst

Bevor du beginnst FontAwesome in dein Theme einzubinden möchte ich erwähnen, dass du hier unbedingt ein Child Theme anlegen solltest, da sonst bei einem Theme-Update dein FontAwesome wieder gelöscht sein könnte!

Gut, ich gebe zu, hier sind es etwas mehr als 2 Zeilen – aber es ist nicht schwieriger!

1. Die Icon-Sammlung in dein Theme hochladen

Erstelle nun einen Ordner innerhalb des Theme-Ordners (/wp-content/themes/dein-theme/), also der ersten Ebene (dort, wo die style.css liegt). Auch hier nenne ich ihn „fonts“.
In diesem Ordner erstellst du am einen weiteren Ordner und nennst ihn „fontawesome“.
Dort hinein lädst du die eben entpackten Ordner „css“ und „webfonts“.

Die Struktur deines Theme-Ordners sollte nun so aussehen:

FontAwesome lokal speichern

2. Einbinden der CSS-Dateien in das Theme

WordPress bietet eine Schnittstelle, um schnell und einfach CSS-Dateien mit in den HEAD einzuschleusen.

Hierfür bearbeite bitte die functions.php (sollte auf gleicher Ebene deiner style.css sein) und füge folgenden Code ein:

function fhw_themename_register_style() {
    wp_enqueue_style( 'fhw_themename_fontawesome', get_stylesheet_directory_uri() . '/fonts/fontawesome/css/all.min.css' );
}
add_action( 'wp_enqueue_scripts', 'fhw_themename_register_style' );

3. Prüfen, dass FontAwesome lokal korrekt eingebunden und geladen wird:

Öffne nun eine Seite deiner WordPress-Website.
Lass dir dort den Quelltext anzeigen (in Chrome und Firefox Strg + U). Suche dort (Strg + F) nach „awesome“.

Wird dir dort eine Zeile ähnlich wie diese hier angezeigt

<link rel='stylesheet' id='fhw_themename_fontawesome-css' href='http://localhost/wordpress/wp-content/themes/fhw-example/fonts/fontawesome/css/all.min.css?ver=5.7.2' type='text/css' media='all' />

dann klicke auf den Link (in dem Fall http://localhost/wordpress/wp-content/themes/fhw-example/fonts/fontawesome/css/all.min.css?ver=5.7.2).
Wird dir hier der CSS-Code angezeigt, ist soweit alles super!

4. Einfügen der Icons

Auch hier ist der WorkFlow ähnlich wie beim Einbinden Ohne WordPress:

Um ein Icon anzuzeigen suche dir auf https://fontawesome.com/ oben auf „Icons“ ein Icon raus. Ich werde hier erneut „github“ verwenden.
Klicke nun das gewünschte Icon an. Oberhalb des Icons hast du nun ein HTML-Element, welches du per Klick kopieren kannst:

Fontawesome Icon Code kopieren

Nun bearbeite eine Seite oder einen Beitrag im WordPress-Backend.

Füge über den Gutenberg-Editor einen Block „individuelles HTML“ ein.
Dort fügst du den eben kopierten Text ein.

Jetzt noch die Seite/Beitrag speichern oder veröffentlichen – schon sollte dort das Icon angezeigt werden!

Fazit

Es ist gar nicht schwer, FontAwesome lokal auf deiner Website einzubinden und die dadurch möglicherweise entstehenden Probleme der DSGVO zu umgehen.
Falls du Hilfe bei der Einbindung brauchst oder weitere Fragen hast darfst du dich natürlich gerne in den Kommentaren melden!

Ein Beitrag von

Fabian Heinz

Fabian Heinz

Comments (9)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Weitere Beiträge dieser Kategorie

Wie du mit nur 2 Zeilen Code FontAwesome lokal einbindest

So schützt du deine Mails einfach mit SPF, DMARC und DKIM

E-Mails sind vermeintlich sicher. Zwar weiß jeder, dass es Spam-Mails gibt – aber dass der Absender gefälscht werden kann weiß kaum jemand. Hier widmen wir uns den Möglichkeiten, das so genannte „E-Mail-Spoofing“ zu verhindern und somit grundsätzlich die Mail-Sicherheit zu erhöhen.
Wie du mit nur 2 Zeilen Code FontAwesome lokal einbindest

So erstellst du eine neue Menü-Position in deinem WordPress-Theme

Jedes WordPress-Theme hat bereits vordefinierte Menü-Positionen. Oft aber genügen die Positionen nicht; du möchtest an einer bestimmten Position ein eigenes Menü einbinden. Hier zeige ich dir, wie du ganz leicht eine neue Menü-Position in deinem WordPress-Theme erstellen kannst.
Wordpress-Logo

So erstellst du neue Widget-Bereiche in deinem WordPress-Theme

In jedem WordPress-Theme werden einige Widget-Bereiche mitgeliefert. In diesen Bereichen können alle möglichen Elemente angezeigt werden, ob Bilder, Texte oder Shop-Artikel. Hier erkläre ich dir, wie du ganz leicht eigene Widget-Bereiche anlegen kannst.