Font Awesome – co to jest, czy warto używać?

Ikony pełnią bardzo istotną rolę w różnego rodzaju graficznych interfejsach użytkownika. Nic zatem dziwnego, że często spotykamy je na stronach internetowych. Ikona jako symbol graficzny, może pełnić wiele funkcji na stronie internetowej a jej przemyślane wykorzystanie może się wiązać z wieloma zaletami.

Prosty symbol graficzny jakim jest ikona może przykładowo ilustrować tekst na stronie internetowej. Ułatwia ona wtedy skanowanie tekstu i zwraca uwagę na istotne fragmenty oferty, opisu produktu lub sekcji na stronie głównej.

Ikony mogą też pełnić funkcję typowo użytkową. Dzięki zrozumiałej symbolice mogą pełnić rolę przycisków i linków. Zastępując słowo „zamknij” ikonką w kształcie krzyżyka oszczędzamy miejsce na ekranie i powodujemy, że interfejs wygląda czysto i nowocześnie.

Takie wydawałoby się drobne decyzje mogą oszczędzać czas i powodować, że interfejs staje się bardziej skalowalny. Ikony nie wymagają tłumaczeń co znacznie ułatwia proces internacjonalizacji i ujednolica wygląd wersji językowych. Ikonki przełamują monotonię bloków tekstu, co może być bardzo przydatne na stronach o różnej obszerności i tematyce. Te złożone z prostych linii, krzywych i prostych figur geometrycznych grafiki są nieocenionym elementem każdej nowoczesnej strony internetowej.

Co to jest Font Awesome?

Font Awesome to biblioteka ikon do wykorzystania na stronie internetowej. Jak sama nazwa wskazuje, wiodącą metodą implementacji jest użycie specjalnego fontu ikonowego, który oprócz glifów poszczególnych liter cyfr i symboli – jakie zazwyczaj wprowadzamy z klawiatury – zawiera bogaty zbiór ikon, który jest ciągle aktualizowany.

Zaletą takiego rozwiązania jest przede wszystkim skalowalność. Raz dodany font z ikonami umożliwia z łatwością dodawać ikony w treści i w interfejsie strony internetowej bez konieczności ich ręcznego rysowania. Font ikonowy to grafika wektorowa, która ma idealnie wyraźne krawędzie w dowolnej wielkości. Ikonom w takiej postaci łatwo zmienić kolor i nadać transformacje i animacje za pomocą klasycznych metod CSS.

Dodatkowe ikony są przypisane w zakresach PUA (ang. Private Use Area), które z definicji nie zastają używane przez konsorcjum Unicode. Implementacja symboli Font Awesome działa najczęściej tak, że oprócz fontu, web developer dodaje specjalny styl CSS z kodami Unicode umieszczonymi w logicznie brzmiących klasach CSS. Jest to możliwe za pomocą pseudo-elementów ::before i właściwości content. Użycie CSSa jest oczywiście opcjonalne i można bezpośrednio wstawiać znaki za pomocą kodów Unicode.

Jak działa Font Awesome w praktyce?

Przykładowo, widoczny na powyższej ilustracji pierwszy znak domku to ikona Font Awesome o nazwie house. Unikalną klasą, która umieszcza ikonę w treści strony internetowej to fa-house. Font Awesome w najnowszych wersjach jest już udostępniany nawet w różnych wariantach stylistycznych. Zakładając, że chcemy wykorzystać kolekcję solid, kod HTML, który umieści wybraną przez nas ikonę to:

<i class="fa-solid fa-house"></i>

Znacznik idomatyczny to oczywiście tylko propozycja, i przyjęło się, że jest to standardowy sposób na aplikowanie ikon Font Awesome w różnych miejscach na stronie internetowej. Równie dobrze jednak, można do tego celu użyć znaczników span lub w ogóle zerwać z filozofią wykorzystywania logicznie brzmiących klas i wstukiwać kolejne kody Unicode w bloku z klasą fa:

Takie wykorzystanie Font Awesome jest bardzo rzadko spotykane. Plusem tej metody jest jednak fakt, że wówczas nie musimy ładować na stronę całego arkusza CSS z wszystkimi klasami Font Awesome, bo na standardowej witrynie i tak wykorzystujemy tylko kilka wybranych ikonek.

Wiele systemów zarządzania treścią i kreatorów stron posiada gotowe rozszerzenia i moduły do wygodnego wstawiania ikon Font Awesome w treści i w interfejsie stron internetowych.

Inne metody wstawiania ikon Font Awesome

Ładowanie na stronę całego fontu, który waży kilkaset kilobajtów i stylu CSS, który nawet po minifikacji waży przeszło 80KB nie wydaje się najlepszym ruchem jeżeli szczególnie zależy nam na wydajności strony internetowej. Ikony wykorzystywane jako interfejs często znajdują się już w obszarze above-the-fold co znacznie utrudnia osiąganie wysokich wyników w PageSpeed Insights. Dodanie właściwości font-display:swap, o której pisałem w artykule Jak optymalizować fonty (czcionki) na stronie internetowej może nie rozwiązywać problemu i zwiększyć parametr CLS w Podstawowych wskaźnikach internetowych. Zaś blokowanie renderowania do momentu załadowania się całego fontu może nadmiernie podwyższać FCP.

Na szczęście, Font Awesome jest udostępniony także w postaci grafik SVG, które możemy umieścić na stronie za pomocą tagu <img> – jak w przypadku zwykłych obrazków:

<img src="icons/fa-house.svg">

lub metodą in-line:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
	<!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
	<path d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/>
</svg>

Ta ostatnia metoda wydaje się najwłaściwsza jeżeli używamy ikony tylko w jednym miejscu i szczególnie zależy nam na szybkości tworzonej strony. Takie korzystanie z ikon należy jednak rozważyć w dłuższej perspektywie, ponieważ dodawanie sporej ilości grafik w formacie SVG może spowodować znaczny przyrost kodu HTML, który w pewnym momencie może być jeszcze większą przeszkodą w optymalizacji strony pod kątem wydajności.

Zalety Font Awesome

Zbierzmy w jednym miejscu najistotniejsze zalety Font Awesome:

• obszerna kolekcja ikon pogrupowana w kategorie tematyczne pozwoli znaleźć odpowiednią ikonkę niezależnie od tematyki witryny,
• użyteczna wyszukiwarka obsługująca tagi pozwoli znaleźć pożądaną ikonkę nawet wtedy, kiedy nie znamy oficjalnego nazewnictwa,
• żywy, ciągle aktualizowany zbiór ikon pozwala mieć pewność, że projekt nie zostanie porzucony zbiór
• darmowa, open-sourcowa kolekcja Font Awesome pozwala wykorzystywać ikony bez opłat licencyjnych,
• dodatkowy styl CSS zawiera proste przekształcenia i animacje CSS,
• możliwość wykorzystania ikon w formacie SVG,
• możliwość wyboru wariantów stylistycznych pozwoli dopasować krój ikon do szablonu witryny i pozwala dokonać ich personalizacji,
• duża popularność Font Awesome przyczyniła się do rozwoju narzędzi ułatwiających i automatyzujących wykorzystywanie Font Awesome w CMSach, page builderach i frameworkach front-endowych.

Popularne strony internetowe wykorzystujące Font Awesome

Z biblioteki Font Awesome korzystają znane na całym świecie marki i witryny z dużym ruchem:

• bloomberg.com,
• developers.cloudflare.com,
• cpanel.net,
• creativecommons.org,
• kaspersky.com,
• edu.netflix.net,
• nginx.com,
• opera.com,
• ikea.com.

Zobacz też kolekcję designerskich stron internetowych wykorzystujących Font Awesome z serwisu AWWWARDS: https://www.awwwards.com/websites/font-awesome/

Alternatywy dla Font Awesome

Istnieje wiele alternatyw, które posiadają wszystkie lub część zalet opisywanej w tym artykule biblioteki ikon Font Awesome. Często można spotkać na stronach internetowych takie fonty ikonowe jak:

• Bootstrap Icons
• Ionicons,
• Dashicons
• Material Design Icons,
• IcoMoon,
• IcoFont,
• Themify Icons,
• Simple Line Icons.

Podsumowanie

Font Awesome to godna rozważenia opcja jeżeli szukamy do naszego stacku kolekcję ikon, którą wykorzystamy w nie jednej realizacji. Bogata kolekcja ikon i możliwość pobierania plików SVG czynią z tej biblioteki uniwersalnym narzędziem do ilustrowania treści i projektowania nowoczesnych interfejsów.