aktuelle webdesign-artikel

26 Jul 2021
Fontawesome-Logo

Wie du mit nur 2 Zeilen Code FontAwesome lokal einbindest

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 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

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 "fonts"-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.html (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 ahnlich 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!

Fabian Heinz

Fabian Heinz

Fabian Heinz beschäftigt sich seit mehreren Jahren mit Webdesign. Zuerst war es nur ein Hobby – jetzt ist es sein Beruf. Als staatlich geprüfter Wirtschaftsinformatiker kennt er sämtliche Zusammenhänge der Technik und überzeugt durch sowohl Theorie- als auch Praxiswissen. Mit viel Leidenschaft ist er bei der Arbeit und zeigt, dass der Beruf auch seine Berufung ist.

Schreibe einen Kommentar

WordPress Cookie Plugin von Real Cookie Banner