Brakująca ikona to objaw — najpierw znajdź warstwę

1. Zbuduj najmniejszy powtarzalny przypadek

Wybierz jedną podstawową ikonę dostępną w używanym zestawie i umieść ją na prostej stronie kontrolnej. Użyj składni z oficjalnej dokumentacji dokładnie dla własnej metody oraz wersji. Jeśli test działa, problem leży prawdopodobnie w konkretnym symbolu albo kontekście strony. Jeśli nie działa, badaj instalację.

Nie testuj jednocześnie ikony Pro, niestandardowej rodziny, animacji i pseudo-elementu. Każda dodatkowa cecha tworzy osobną możliwość błędu.

2. Sprawdź sieć i konsolę

Otwórz Network, wyłącz pamięć podręczną na czas testu i przeładuj stronę. Poszukaj nieudanych żądań CSS, JS, fontów albo sprite’ów. Kod 404 wskazuje zwykle złą ścieżkę lub brak pliku. Blokada polityki bezpieczeństwa, CORS albo rozszerzenia przeglądarki będzie opisana w konsoli.

Sprawdź odpowiedź, a nie sam status. Serwer może zwrócić stronę błędu HTML pod adresem fontu. Narzędzia mogą wtedy pokazać problem z dekodowaniem zasobu mimo kodu, który wygląda poprawnie.

3. Potwierdź wersję i jedno źródło

CSS jednej wersji nie powinien korzystać z przypadkowych fontów innej. Skrypt może konkurować z pluginem lub drugim skryptem. Zapisz pełne adresy i kolejność ładowania. Tymczasowo wyłączaj duplikaty tylko w środowisku testowym, po jednym, obserwując zmianę.

Jeśli problem zaczął się po aktualizacji, przeczytaj informacje o wydaniu i sprawdź nazwy, prefiksy oraz integrację. Aliasy zwiększają zgodność, ale nie obejmują każdej kombinacji starego kodu z nowymi plikami.

4. Sprawdź nazwę, rodzinę i styl

Otwórz oficjalną kartę ikony. Porównaj identyfikator znak po znaku, uwzględniając małe litery i łączniki. Potwierdź, że wybrany styl istnieje dla tej ikony i jest dostępny w Twoim zestawie. Symbol należący tylko do płatnego lub innego pakietu nie pojawi się dlatego, że klasa wygląda prawidłowo.

Przy Web Fonts sprawdź w panelu Computed, jaka rodzina i waga fontu faktycznie dotyczą pseudo-elementu. Globalna reguła CSS może wygrać przez większą specyficzność. Przy SVG sprawdź, czy biblioteka zamieniła znacznik i czy wygenerowany element ma wymiary.

5. Zobacz, czy ikona nie jest tylko niewidoczna

Element może istnieć, ale mieć kolor identyczny z tłem, zerową szerokość, „display: none”, przezroczystość albo zostać przycięty przez kontener. Wyłączaj podejrzane reguły w inspektorze, nie edytując od razu kodu produkcyjnego. Sprawdź stany hover, focus i disabled oraz wariant mobilny.

Jeżeli widzisz ikonę dopiero po zmianie rozmiaru okna, problem może dotyczyć kolejności inicjalizacji, układu albo obserwowania dynamicznych zmian. Zbadaj moment dodania elementu do DOM.

6. Pseudo-elementy i dynamiczna treść wymagają konfiguracji

Pseudo-element korzysta z „content”, prawidłowej rodziny i stylu fontu. Przy wariancie SVG + JS obsługa wyszukiwania pseudo-elementów jest konfigurowalna i może być domyślnie wyłączona. Nie mieszaj instrukcji dla fontu z instrukcją dla SVG bez zrozumienia mechanizmu.

W aplikacji dynamicznej symbol może zostać dodany po pierwszym skanowaniu dokumentu. Oficjalne integracje frameworków zwykle rozwiązują to inaczej niż globalny skrypt. Używaj metody przewidzianej dla architektury, zamiast ręcznie uruchamiać pełne skanowanie po każdej zmianie.

7. Sprawdź proces budowania i pamięć podręczną

Bundler może usunąć niejawnie używaną ikonę albo rozwiązać dwa egzemplarze zależności. Minifikacja CSS może zmienić ścieżki, a CDN lub cache utrzymywać starszy arkusz. Porównaj źródłowy plik z artefaktem wydania i wykonaj kontrolowane odświeżenie cache.

Nie naprawiaj problemu trwałym wyłączeniem cache czy polityki bezpieczeństwa. To narzędzia oraz zabezpieczenia, które trzeba poprawnie skonfigurować. Rozwiązaniem jest zgodny zestaw zasobów i właściwe nagłówki, nie usunięcie kontroli.

Zapisz diagnozę jako test regresji

Gdy znajdziesz przyczynę, dodaj konkretny przypadek do strony kontrolnej lub testu komponentu. Zanotuj oczekiwaną ikonę, metodę i wersję. Przy następnej aktualizacji test pokaże problem przed użytkownikiem.

Powtórz test przynajmniej w dwóch silnikach przeglądarek i w trybie prywatnym bez rozszerzeń. Jeśli usterka występuje tylko w jednym profilu, sprawdź blokowanie zasobów, lokalny cache i dodatki ingerujące w fonty lub skrypty. Jeśli występuje wszędzie, masz mocniejszy sygnał, że przyczyna leży w artefakcie projektu albo serwerze. Zanotowanie tej różnicy chroni przed naprawianiem kodu na podstawie lokalnego wyjątku.

Wróć do Wdrożenie Font Awesome i uzupełnij dokumentację źródła. Jeśli ikona działa wizualnie, ale jest jedyną treścią przycisku, następny krok to Dostępne przyciski z ikonami: od wyglądu do zrozumiałej nazwy.