Ikona ma pomagać wykonać zadanie, nie tylko zajmować miejsce
Font Awesome pozwala szybko dodać spójne symbole do przycisków, menu i komunikatów. Sama dostępność dużej biblioteki nie rozwiązuje jednak problemu projektowego. Najpierw trzeba ustalić, co ikona ma oznaczać, czy odbiorca zrozumie ją bez zgadywania i jak jej funkcję pozna osoba korzystająca z czytnika ekranu. Dopiero potem warto wybrać nazwę, styl i sposób ładowania.
Ten przewodnik łączy trzy perspektywy: język interfejsu, kod oraz utrzymanie. Nie jest katalogiem do przeklejania wszystkich możliwych symboli. Pomaga stworzyć mały, konsekwentny zestaw, wdrożyć go jedną metodą i sprawdzić zachowanie po aktualizacji.
Zacznij od funkcji
Ikona lupy może oznaczać rozpoczęcie wyszukiwania, ale w innym miejscu tylko oznaczać sekcję wyników. Gwiazda bywa oceną, ulubionym elementem albo wyróżnieniem. Symbol bez kontekstu nie ma jednego uniwersalnego znaczenia. Dlatego przy każdej ikonie zapisz czasownik: „wyszukaj”, „dodaj do ulubionych”, „pobierz”, „zamknij”. Jeśli trudno wskazać jedno działanie lub informację, być może sama ikona jest niewłaściwa.
Widoczny tekst jest często najlepszym partnerem symbolu. Przycisk „Pobierz raport” z ikoną pobierania jest łatwiejszy do rozpoznania niż samotna strzałka. Tekst można ukryć wizualnie tylko wtedy, gdy układ naprawdę tego wymaga i pozostawiono poprawną nazwę dostępną dla technologii asystujących.
Wybierz jedną drogę techniczną
Font Awesome można osadzić między innymi jako Web Fonts + CSS albo SVG. Dostęp może pochodzić z zestawu obsługiwanego zewnętrznie, plików przechowywanych we własnym projekcie lub pakietów używanych przez framework. Każde podejście ma inny przepływ ładowania i diagnozowania.
Nie dodawaj kolejnego sposobu tylko dlatego, że pojedyncza instrukcja z internetu używa innego fragmentu kodu. Dwa wydania biblioteki, plugin WordPressa i ręcznie wklejony skrypt mogą jednocześnie modyfikować te same elementy. Typowym skutkiem są duplikaty, miganie, brak części ikon albo nieprzewidywalne klasy.
Na Wdrożenie Font Awesome znajduje się proces inwentaryzacji, wyboru metody, instalacji i testu. Porównanie dwóch głównych sposobów rozwija artykuł SVG czy Web Fonts? Wybór metody Font Awesome bez wojny technologii.
Biblioteka to nie słownik znaczeń
Wyszukiwarka ikon pomaga znaleźć kształt, ale znaczenie powstaje w konkretnym interfejsie. Przed wyborem sprawdź symbol w rozmiarze docelowym, obok tekstu, w trybie jasnym i ciemnym oraz w stanie nieaktywnym. Upewnij się, że różnica koloru nie jest jedyną różnicą między stanami.
Ikony marek służą do reprezentowania odpowiadających im marek i usług. Nie należy używać znanego logo jako ogólnego symbolu podobnej funkcji ani tworzyć wrażenia poparcia. Zasady użycia oraz licencję trzeba sprawdzić w aktualnych materiałach projektu i właściciela danego znaku.
Strona Wybór ikon pokazuje, jak przejść od intencji do krótkiej listy kandydatów i udokumentować decyzję.
Dostępność jest częścią znaczenia
Ikona dekoracyjna, która powtarza sąsiedni tekst, powinna być pomijana przez technologię asystującą. Ikona będąca jedyną treścią przycisku wymaga dostępnej nazwy opisującej działanie. Nazwa „X” albo „ikona kosza” opisuje wygląd, lecz nie cel. Lepsze są „Zamknij” i „Usuń wersję roboczą”.
Nie wystarczy dodać dowolnego atrybutu ARIA. Trzeba sprawdzić semantykę całej kontrolki, kolejność fokusu, obsługę klawiatury i komunikat czytnika. Wpis Dostępne przyciski z ikonami: od wyglądu do zrozumiałej nazwy prowadzi przez taki test.
Mniej ikon oznacza lżejszą decyzję i często lżejszą stronę
Jeżeli projekt korzysta z kilkunastu symboli, nie zawsze potrzebuje całej biblioteki ładowanej w każdym widoku. Sposób optymalizacji zależy od metody instalacji: możliwe jest użycie wybranych ikon, podzbiorów albo odpowiednich pakietów. Najpierw jednak mierz. Sprawdź zasoby w narzędziach deweloperskich i porównaj wynik przed oraz po zmianie.