WooCommerce- und WordPress-Icons werden nicht angezeigt
Leere Kästchen statt Symbolen – meist blockiert etwas die Schriftdatei, in der die Symbole stecken.
Was da eigentlich fehlt
Die Symbole in WordPress und WooCommerce – das Kreuz zum Entfernen im Warenkorb, Pfeile, Warenkorb, Lupe – sind meistens keine Bilder, sondern Zeichen einer Schriftart. Üblicherweise Font Awesome oder Dashicons.
Wird diese Schriftdatei nicht geladen, zeigt der Browser das, was er in so einem Fall immer zeigt: ein leeres Kästchen oder ein zufälliges Zeichen. Die Funktion selbst ist intakt – man sieht sie nur nicht.
Erst nachsehen, dann reparieren
Bevor du irgendein Plugin installierst, sieh nach, was fehlt. Das dauert dreißig Sekunden:
F12 drücken, Reiter „Konsole", Seite neu
laden. Rote Zeilen mit .woff, .woff2 oder
fontawesome sagen dir, welche Datei nicht kommt – und
der Fehlercode daneben sagt, warum.
Ohne diesen Blick baust du ein Plugin ein, das eine zweite Symbolbibliothek mitbringt. Dann sind die Kästchen weg, die Seite lädt aber dauerhaft mehr, als sie müsste.
Die vier Ursachen
1. Ein Optimierungs-Plugin blockiert die Schrift
Die häufigste Ursache. Plugins wie Autoptimize, WP Rocket oder Perfmatters bieten an, „ungenutzte Stile zu entfernen" oder Dateien zusammenzufassen – und werfen dabei die Symbolschrift mit hinaus.
Test: Optimierung kurz abschalten, Seite neu laden. Sind die Symbole
da, hast du den Verursacher. Meist gibt es eine Ausnahmeliste, in die
fontawesome oder dashicons eingetragen werden
kann.
2. Nach der Umstellung auf https
Wird die Schriftdatei noch über http eingebunden,
blockiert der Browser sie als unsicheren Inhalt. In der Konsole steht
dann etwas von mixed content.
Das betrifft nie nur die Symbole – meistens fehlen auch Bilder. Dann liegt es an alten Adressen in der Datenbank.
3. Nach einem Umzug auf ein CDN
Liegen die Dateien auf einer anderen Adresse als die Website, verlangt der Browser bei Schriften eine ausdrückliche Erlaubnis. Fehlt die entsprechende Kopfzeile, blockiert er – bei Bildern nicht, bei Schriften schon. In der Konsole steht CORS.
<IfModule mod_headers.c>
<FilesMatch "\.(woff2?|ttf|eot)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>4. Das Theme bringt die Schrift gar nicht mit
Erst dann ist das Plugin „Font Awesome" die richtige Antwort. Es hat keine Einstellungen und tut nur eines: Es stellt sicher, dass die Bibliothek geladen wird und Themes wie Plugins darauf zugreifen können.
Die Symbole, die ein Theme oder Plugin benutzt, sind mitgeliefert. Du musst keine Lizenz kaufen, auch wenn Font Awesome eine kostenpflichtige Fassung anbietet. Wer dir etwas anderes erzählt, verkauft dir etwas, das du schon hast.
Passt das nicht auf deinen Fall?
Dieser Artikel beantwortet die Frage allgemein – deine ist vermutlich konkreter. Schreib mir kurz, worum es geht. Ich antworte selbst, meist am selben Tag, und es kostet nichts.
Hat dir das geholfen?
Dann sag es weiter. Eine kurze Bewertung dauert dreißig Sekunden und sorgt dafür, dass die Nächsten diese Antwort überhaupt finden.
Damit arbeitest du weiter
Passt dazu
- WordPress Warum zeigt WordPress meine Bilder in der Mediathek nicht an? Meistens liegt es an einer von sechs Kleinigkeiten – und die erste davon kostet dich zehn Sekunden.
- Schnipsel WooCommerce-Unterstützung im Theme aktivieren Fünf Zeilen, wenn die Produktseiten nach der Shop-Installation kaputt aussehen.
- WordPress Was sind WordPress MU-Plugins? Plugins, die immer laufen und sich nicht abschalten lassen. Nützlich – und genau deshalb mit Vorsicht zu gebrauchen.
- WordPress Was sind Permalinks? Die dauerhafte Adresse einer Seite. „Dauerhaft" ist dabei wörtlich gemeint – und der Grund, warum man sie nicht einfach umstellt.