Warum du Font Awesome in Elementor deaktivieren solltest
Font Awesome ist eine Icon-Bibliothek, die Elementor standardmäßig lädt — auch wenn du keine einzigen Font-Awesome-Icons verwendest. Das zusätzliche CSS und die Webfonts verlangsamen deine Website unnötig. Besonders bei mobilen Nutzern mit langsamer Verbindung macht jedes eingesparte Kilobyte einen Unterschied.
In dieser Anleitung zeigen wir dir, wie du Font Awesome in Elementor sicher deaktivierst und welche Alternativen du nutzen kannst.
Font Awesome deaktivieren: Die Methoden
Methode 1: Über die Elementor-Einstellungen
Seit Elementor 3.x kannst du Font Awesome direkt in den Einstellungen deaktivieren:
- Gehe zu Elementor → Einstellungen → Erweitert
- Setze „Font Awesome 4 Support laden“ auf Nein
- Elementor nutzt dann nur noch die schlankeren eicons (Elementor Icons)
Diese Methode ist die einfachste und empfohlene Lösung für die meisten Nutzer.
Methode 2: Über die functions.php im Child Theme
Wenn du mehr Kontrolle brauchst, deaktiviere Font Awesome per Code in deinem Hello Elementor Child Theme:
add_action('wp_enqueue_scripts', function() {
wp_deregister_style('font-awesome');
wp_dequeue_style('font-awesome');
wp_deregister_style('font-awesome-5-all');
wp_dequeue_style('font-awesome-5-all');
}, 50);Methode 3: SVG-Icons als Elementor-Alternative aktivieren
Elementor unterstützt seit Version 3.x Inline-SVG-Icons als Alternative zu Font Awesome. Unter Elementor → Einstellungen → Erweitert aktivierst du „Inline Font Icons“. SVG-Icons sind schärfer, performanter und benötigen keine zusätzliche Webfont-Datei.
Performance-Gewinn durch Font Awesome Deaktivierung
Font Awesome lädt standardmäßig:
- CSS-Datei: ~30 KB (gzipped)
- Webfont: ~80-150 KB je nach Format (woff2/woff)
- Zusätzliche HTTP-Anfragen: 2-3
Durch die Deaktivierung sparst du 100-200 KB und 2-3 HTTP-Anfragen pro Seitenaufruf. Bei einem Lighthouse-Test kann das den Performance-Score um 5-10 Punkte verbessern.
Prüfen, ob Font Awesome noch geladen wird
Nach der Deaktivierung kannst du prüfen, ob Font Awesome wirklich nicht mehr geladen wird:
- Öffne die Browser-Entwicklertools (F12)
- Gehe zum Tab „Netzwerk“
- Lade die Seite neu und suche nach „font-awesome“ oder „fa-„
- Wenn keine Einträge erscheinen, wurde Font Awesome erfolgreich deaktiviert
Mögliche Probleme nach der Deaktivierung
Nach dem Entfernen von Font Awesome können Icons verschwinden, die in folgenden Bereichen verwendet werden:
- Elementor-Widgets mit Font-Awesome-Icons (ersetze sie durch Elementor Icons oder SVGs)
- Third-Party-Plugins, die Font Awesome benötigen (prüfe einzeln)
- Custom CSS mit Font-Awesome-Klassen (.fa, .fas, .fab)
Tipp: Prüfe nach der Deaktivierung alle Seiten visuell auf fehlende Icons.
Häufig gestellte Fragen zum Deaktivieren von Font Awesome
Kann ich einzelne Font-Awesome-Icons behalten?
Ja, lade nur das Subset der benötigten Icons. Services wie Fontello oder IcoMoon erstellen Custom-Icon-Fonts mit nur den Icons, die du tatsächlich verwendest.
Beeinflusst die Deaktivierung meine Elementor-Designs?
Nur wenn du explizit Font-Awesome-Icons in deinen Designs verwendest. Elementor Icons (eicons) bleiben davon unberührt und funktionieren weiterhin.
Welche Icon-Alternative ist am performantesten?
Inline-SVG-Icons sind die performanteste Lösung: keine zusätzlichen HTTP-Anfragen, perfekte Schärfe auf allen Bildschirmgrößen und volle CSS-Styling-Möglichkeiten.
Soll ich Font Awesome auch auf der Admin-Seite deaktivieren?
Nein, deaktiviere Font Awesome nur im Frontend. Das Backend lädt eigene Ressourcen und wird nicht von Besuchern gesehen.