Jeszcze wczoraj przy menu, przyciskach i sekcjach były normalne ikony, a dziś widzisz puste kwadraty, prostokąty albo dziwne znaki? Zazwyczaj oznacza to, że CSS wie, jaki znak ma wyświetlić, ale przeglądarka nie może poprawnie załadować właściwego fontu ikon.
W WordPressie najczęściej sprawdzam Font Awesome, błędy 404, CORS, cache oraz konflikt kilku różnych wersji biblioteki.
Pusty kwadrat często oznacza, że plik webfontu nie został załadowany.
W konsoli przeglądarki szukam błędów CORS i 404.
CSS i webfonty Font Awesome muszą pochodzić ze zgodnej wersji.
Ikona Pro nie zadziała, jeśli strona ładuje wyłącznie zasoby Free.
CDN może wymagać prawidłowej konfiguracji CORS.
Po naprawie czyszczę cache WordPressa, CDN i przeglądarki.
Dlaczego zamiast ikony pojawia się kwadrat?
W klasycznym wariancie Font Awesome CSS przypisuje do elementu konkretny znak znajdujący się w specjalnym foncie.
Jeżeli przeglądarka ma CSS, ale nie pobierze odpowiedniego pliku .woff2, użytkownik może zobaczyć pusty kwadrat.
1. Otwórz Console i Network
To zazwyczaj najszybszy sposób diagnozy. Otwieram narzędzia deweloperskie i sprawdzam zakładki Console oraz Network.
fa-solid-900.woff2
fa-regular-400.woff2
fa-brands-400.woff2Jeżeli któryś plik zwraca 404, 403 albo jest blokowany przez CORS, mam już konkretny trop.
2. Błąd 404 – CSS wskazuje złą ścieżkę
Po migracji, zmianie domeny albo optymalizacji CSS zdarza się, że arkusz stylów wskazuje font pod adresem, który już nie istnieje.
3. CORS – font jest ładowany z innej domeny
https://www.example.pli font:
https://cdn.example.pl/fonts/fa-solid-900.woff2Dla przeglądarki są to różne źródła. CDN albo serwer udostępniający font musi pozwolić na prawidłowe żądanie między domenami.
4. Konflikt dwóch wersji Font Awesome
Motyw może ładować jedną wersję biblioteki, Elementor drugą, a dodatkowa wtyczka trzecią.
Efekt? Klasa ikony może pochodzić z nowszej wersji, podczas gdy strona korzysta ze starszego fontu.
5. Zły font-family lub font-weight
Font Awesome rozróżnia style ikon. Jeśli CSS oczekuje wersji Solid, ale element korzysta z niewłaściwej rodziny albo grubości fontu, ikona może się nie wyświetlić.
6. Ikona dostępna tylko w wersji Pro
Jeśli kod wskazuje ikonę dostępną tylko w wersji płatnej, a strona ma Font Awesome Free, odpowiedniego znaku po prostu nie będzie w załadowanym foncie.
7. Optymalizacja CSS
Łączenie, opóźnianie i usuwanie nieużywanego CSS może w niektórych konfiguracjach usunąć albo przesunąć zasoby potrzebne ikonom.
Co sprawdzam przy pustych ikonach?
- Czy font zwraca HTTP 200.
- Czy w konsoli występuje błąd CORS.
- Czy CSS wskazuje poprawną ścieżkę do webfontu.
- Czy nie są ładowane różne wersje Font Awesome.
- Czy dana klasa ikony istnieje w używanej wersji.
- Czy wykorzystywana jest właściwa rodzina i grubość fontu.
- Czy CDN nie blokuje żądania.
- Czy optymalizacja CSS nie usunęła potrzebnych reguł.
- Czy został wyczyszczony cache.
Jeżeli problem dotyczy WordPressa, mogę sprawdzić go w ramach wsparcia technicznego WordPress .
Sprawdzę Font Awesome, CORS, CSS i cache
Zamiast podmieniać każdą ikonę osobno, znajdę wspólną przyczynę problemu i przywrócę poprawne ładowanie zasobów.
Font Awesome i puste kwadraty – FAQ
Dlaczego zamiast ikon widzę kwadraty?
Często CSS próbuje wyświetlić znak z Font Awesome, ale właściwy webfont nie został pobrany albo używana jest niezgodna wersja biblioteki.
Jak sprawdzić błąd CORS Font Awesome?
Otwórz narzędzia deweloperskie przeglądarki i sprawdź Console oraz Network. Błąd CORS przy pliku .woff lub .woff2 jest wyraźnym sygnałem problemu.
Czy Elementor może powodować konflikt Font Awesome?
Problem może wynikać z jednoczesnego ładowania bibliotek przez Elementor, motyw i inne wtyczki.
Czy cache może powodować brak ikon?
Tak, szczególnie po aktualizacji ścieżek lub plików CSS. Po naprawie zawsze czyszczę cache WordPressa, CDN i przeglądarki.
Czy ikony Font Awesome Pro działają z wersją Free?
Nie wszystkie. Jeśli konkretna ikona jest dostępna tylko w wersji Pro, odpowiedni zasób musi być rzeczywiście dostępny na stronie.
Kamil Sudoł – freelancer WordPress & SEO. Od 2015 roku tworzę i rozwijam strony internetowe oraz sklepy WooCommerce, a także zajmuję się SEO i widocznością firm w Google. Na blogu publikuję praktyczne materiały dotyczące WordPressa, SEO, UX i marketingu internetowego.
