In dieser Anleitung zeige ich dir Schritt für Schritt, wie du Font Awesome in Elementor deaktivierst und lokal in deiner WordPress-Website einbindest. Durch die lokale Integration verbesserst du die Ladezeit deiner Seite, schützt die Privatsphäre deiner Besucher und gehst rechtlichen Stolperfallen aus dem Weg.
Es gibt zahlreiche Gründe, warum man Font Awesome nicht einfach so einbinden sollte:
Was ist Font Awesome und warum solltest du es lokal nutzen?
Font Awesome ist eine Sammlung von Icons, die wie eine Schriftart funktioniert. Anstatt Buchstaben bestehen die Zeichen hier aus Symbolen, die über CSS gesteuert werden. Das hat den Vorteil, dass sie skalierbar sind, ohne an Qualität zu verlieren, und weniger Speicherplatz benötigen als Rastergrafiken wie .png oder .jpeg.
Wenn du Font Awesome lokal einbindest, kannst du die Ladezeiten deiner Website optimieren, da die Icons direkt von deinem Server und nicht von externen Quellen geladen werden. Außerdem hast du mehr Kontrolle über deine Daten und die Privatsphäre deiner Nutzer.
Font Awesome in Elementor deaktivieren – Schritt-für-Schritt
Hier erfährst du, wie du Font Awesome in Elementor deaktivierst und auf eine lokale Version umstellst.
Elementor Font Awesome deaktivieren
Schritt 1: Öffne dein WordPress-Dashboard und navigiere zu Elementor > Einstellungen.
Schritt 2: Wechsle zum Tab Erweitert.
Schritt 3: Suche nach der Option Load Font Awesome 4 Support und wähle Nein aus dem Dropdown-Menü.
Schritt 4: Klicke auf Änderungen speichern.
Fertig! Du hast nun Font Awesome in Elementor deaktiviert.
Font Awesome lokal einbinden
Nun, da du Font Awesome in Elementor deaktiviert hast, kannst du die Icons lokal einbinden, um die Performance weiter zu optimieren.
1. Font Awesome herunterladen
Besuche die offizielle Font Awesome-Website und lade die neueste Version herunter. Entpacke die ZIP-Datei und speichere den Ordner an einem Ort, den du leicht findest.
2. Dateien in WordPress hochladen
Schritt 1: Gehe in deinem WordPress-Dashboard auf Medien > Datei hinzufügen.
Schritt 2: Lade den kompletten Font Awesome-Ordner hoch, den du zuvor entpackt hast.
3. Font Awesome in Elementor integrieren
Jetzt binden wir die hochgeladenen Dateien in dein WordPress-Theme ein:
Schritt 1: Gehe zu Design > Theme-Datei-Editor und öffne die Datei functions.php.
Schritt 2: Füge den folgenden Code am Ende der Datei ein:
function my_enqueue_font_awesome() {
wp_enqueue_style('font-awesome', get_template_directory_uri() . '/pfad/zu/font-awesome/css/all.min.css', array(), '5.x.x');
}
add_action('wp_enqueue_scripts', 'my_enqueue_font_awesome');
Schritt 3: Ersetze /pfad/zu/font-awesome/ mit dem tatsächlichen Pfad zu dem Ordner, den du hochgeladen hast. Das könnte zum Beispiel so aussehen: /wp-content/uploads/font-awesome/css/all.min.css.
Schritt 4: Klicke auf Datei speichern.
Jetzt lädt deine Seite Font Awesome direkt von deinem eigenen Server!
Vorteile der lokalen Einbindung
Durch die lokale Einbindung von Font Awesome erhältst du:
- Schnellere Ladezeiten: Deine Icons werden von deinem Server geladen, was weniger externe Anfragen bedeutet.
- Mehr Kontrolle: Du bist nicht von externen Diensten abhängig, was dir mehr Sicherheit und Flexibilität gibt.
- Privatsphäre: Da keine Daten an externe Server gesendet werden, schützt du die Privatsphäre deiner Besucher besser.
Mehr dazu in unserem anderen Beitrag zu Font Awesome:
Fazit
Mit dieser Anleitung hast du Elementor Font Awesome erfolgreich deaktiviert und lokal in deine WordPress-Seite eingebunden. So verbesserst du die Performance deiner Website und sorgst für mehr Datenschutz.
Wenn du noch Fragen hast oder Unterstützung brauchst, stehe ich dir gerne zur Verfügung. Viel Erfolg beim Optimieren deiner Website!
Deutsch 
English