W dzisiejszych czasach przytłaczająca większość stron internetowych jest urozmaicona różnymi grafikami i zdjęciami. Często to właśnie grafika jest wysunięta na pierwszy plan. Owszem, pomijając strony typu portfolio, treść jest ważniejsza i to ona decyduje o wartości danej witryny. Jednak grafika przyciąga uwagę odbiorców i sprawia, że strona jest atrakcyjniejsza i nasi odbiorcy chętniej z niej korzystają. Odpowiednio dobrane i ładne zdjęcia podnoszą walory estetyczne strony. Oczywiście pomijam tutaj wszelkie kwestie związane z SEO. Natomiast ikonki nie tylko upiększają szatę graficzną, ale pełnią także rolę użytkową. Z artykułu dowiesz się co to jest Font Awesome, a także jak tego używać. Dodatkowo wytłumaczę, dlaczego warto używać na stronie internetowej ikonek, jaką pełnią funkcję i jakie są ich zalety.
Spis treści
Jaką rolę pełnią ikonki
Dobrze dobrane ikonki to nie tylko ładny dodatek do naszej strony www. Ikonki przede wszystkim pełnią pewną niezwykle ważną rolę. Ikonki sprawiają, że interfejs staje się bardziej intuicyjny. Zapewne każdy użytkownik jest przyzwyczajony to tego, że klikając ikonkę z trzema kreseczkami (tzw. hamburger icon”) można otworzyć menu, natomiast klikając symbol X, można zamknąć menu lub okienko. Oczywiście, zamiast ikonek możemy zastosować frazy „menu” oraz „zamknij”. Jednak czy takie podejście będzie właściwe? Po pierwsze użytkownicy są przyzwyczajeni, że niektóre elementy powinny być opatrzone odpowiednimi ikonkami. Wtedy w sposób automatyczny i intuicyjny poruszają się po danym interfejsie. Jeśli przełamiemy schemat i zrezygnujemy z ikonek na rzecz tekstu, to sprawimy, że użytkownik dłużej będzie się zastanawiał nad daną czynnością, a to niewątpliwie obniża UI (user experience).
Poza tym ikonki zajmują mało miejsca. Dużo łatwiej jest zmieścić ikonkę niż napis „moje konto” lub „ulubione produkty”. Jest jeszcze jedna kwestia, o której należy pamiętać. Jeśli w którymś momencie będziemy chcieli dodać kolejne wersje językowe do naszej strony, odpadnie nam kilka fraz do przetłumaczenia. Ikonki są uniwersalne i zrozumiałe dla każdego, niezależnie od tego jakim posługuje się językiem.
Warto wspomnieć o tym, że ikonki służą także do dzielenia większych połaci tekstu. Jeśli chcemy zwrócić uwagę użytkownika na daną partię tekstu, warto dodać ikonkę. Takie fragmenty łatwiej się czyta i z pewnością bardziej przykuwają uwagę.
Font Awesome – co to jest
Font Awesome jest jedną z najpopularniejszych bibliotek ikon, które możemy zastosować na naszej stronie internetowej. Jest to zbiór icon fonts, czyli specjalnych fontów, które zamiast liter mają symbole takie jak np. symbol użytkownika, samochodu dostawczego, itp.
Ikonki Fon Awesome tylko z pozoru wyglądają jak zwykłe obrazki. Jednak dzięki temu, że nimi nie są, możemy w prosty sposób za pomocą kodu CSS zmieniać ich wygląd, np. zmieniając kolor, rozmiar, czy dodając cień. W przeciwieństwie do zwykłych, obrazków ikonkom Font Awesome bardzo łatwo jest zmienić wygląd i dopasować je do naszej szaty graficznej. Nie musimy używać specjalnego programu graficznego, żeby skorygować wygląd ikonek.
Biblioteka Font Awesome posiada ogromy zbiór symboli, który jest na bieżąco powiększany. Dzięki temu bardzo łatwo jest znaleźć to, czego w danym momencie potrzebujemy.
Jak zacząć korzystać z Font Awesome
W pierwszej kolejności musimy podpiąć narzędzie Font Awesome pod naszą stronę. Można pobrać plik z biblioteką i serwować go z naszego serwera. Ja jednak pokażę bardziej wydajny sposób polegający na skorzystaniu z serwera CDN.
Wejdź na stronę cdnjs.com. Skopiuj pierwszy tag HTML:
Następnie wklej go w nagłówku strony pomiędzy znacznikami <head>.
Od teraz możesz już korzystać z Font Awesome 🙂
Skorzystaj z wyszukiwarki i znajdź ikonkę, którą chcesz wstawić na stronę.
Następnie kliknij wybraną ikonkę. W górnym menu możesz zmienić styl dla ikonki. Na poniższym zrzucie wybrałam ikonkę, która ma sam kontur.
W kolejnym kroku skopiuj znacznik HTML i wklej na swoją stronę.
Jak dodać Font Awesome do WordPressa
W przypadku WordPressa skrypty podczepia się w nieco inny sposób. Poniższy kod należy wkleić w pliku functions.php.
function add_font_awesome(){
wp_enqueue_style( 'fa', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css', '1.0.0', true );
}
add_action('wp_header' , 'add_font_awesome');
Jeśli nie lubisz zaglądać do kodu strony, to mam dla Ciebie dobrą wiadomość. W repozytorium WordPressa jest gotowa oficjalna wtyczka 🙂
Zalety biblioteki Font Awesome
Biblioteka Font Awesome ma niewątpliwie dużo zalet, które przemawiają za tym, żeby z niej skorzystać.
- Font Awesome zawiera ogromny zbiór ikonek, dzięki czemu bez problemu znajdziemy pożądany symbol.
- Biblioteka Font Awesome posiada wygodną wyszukiwarkę. Ponadto ikonki są pogrupowane na kategorie.
- Font Awesome dzięki swojej popularności jest cały czas rozwijana. Dzięki temu możemy mieć pewność, że projekt w najbliższym czasie nie zostanie porzucony. Co więcej, zbiór ikonek cały czas się powiększa.
- Biblioteka ta występuje zarówno w wersji płatnej, jak i bezpłatnej. Darmowa wersja w zupełności wystarcza w większości projektów.
- Font Awesome posiada wsparcie w najpopularniejszych CMSach, page builderach oraz front-endowych frameworkach.
- Możemy skorzystać z ikonek w formacie wektorowym SVG.
- Ikonki możemy łatwo stylizować za pomocą kodu CSS.
A jakie są wady?
Niestety tak jak każde rozwiązanie, biblioteka Font Awesome ma także swoje wady.
- Fonty ikonowe mogą pogorszyć prędkość naszej strony. Przeglądarka w pierwszej kolejności musi pobrać plik ze stylem na fontów, a dopiero potem może wyrenderować ikonkę. Dlatego, jeśli na stronie masz tylko kilka ikonek, to może warto wstawić je jako zwykłą grafikę PNG. Oczywiście problem ten można częściowo rozwiązać korzystając z serwerów CDN.
- Dużo stron korzysta z Font Awesome, przez co ikonki mogą być nieco nudne dla użytkowników i powtarzalne.
Inne biblioteki podobne do Font Awesome
Warto wspomnieć o tym, że biblioteka Font Awesome ma także konkurentów. Poniżej lista innych alternatywnych bibliotek, które są także godne uwagi:
- Material Design Icons,
- Bootstrap Icons,
- LineIcons,
- Ionicons,
- Octicons,
- Typicons.,
- Fontello,
- Themify Icons,
- Simple Line Icons.
Oczywiście lista ta jest znacznie dłuższa, jednak to właśnie Font Awesome stoi na jej czele.
Co to jest Font Awesome – podsumowanie
Niewątpliwie treść na stronie jest najważniejsza. Jeśli jest niskiej jakości, to nawet najładniejsza szata graficzna nie pomoże przyciągnąć użytkowników. Dzięki odpowiednio przygotowanej treści możemy wybić się na pierwszą pozycję w wynikach wyszukiwania Google. Owszem są jeszcze inne ważne aspekty takie jak zoptymalizowane grafiki, szybkość strony, ale niewątpliwie ciężko jest się przebić bez wartościowego tekstu.
Jednak nie należy przy tym zapominać o wyglądzie i walorach użytkowych naszej strony. Przecież nie tworzymy stron tylko dla robotów wyszukiwarek, ale przede wszystkim dla naszych użytkowników. Dobrze zorganizowana witryna bezsprzecznie sprawi, że użytkownicy chętniej będą z niej korzystać. Dodając odpowiednie ikonki, podnosimy nie tylko walory estetyczne, ale także użytkowe.
Biblioteka Font Awesome ułatwia nam proces tworzenia strony. W jednym miejscu mamy ogromny zbiór symboli, w którym bardzo łatwo jest znaleźć pożądaną ikonkę. Ponadto szybko można zmienić wygląd danej ikonki. Wystarczy dodać kilka reguł CSS.