Ikonki na stronie internetowej - wykorzystaj Font Awesome!

Strona internetowa zawierająca wyłącznie tekst to relikt, obecnie króluje grafika, artykuły wspomagane są lepszej lub gorszej jakości zdjęciami lub ikonkami – te drugie wzbogacają całą stronę nadając nowoczesny wygląd menu, punktowaniu i krótkim notkom. Jeśli nie chcemy tworzyć od podstaw dziesiątek małych obrazków, z pomocą przychodzą Font Awesome!

Własne ikonki na stronę - czy warto?

Tworzenie własnych ikonek może być świetną zabawą, na pewno sprawi, że strona będzie odbiegała od szablonowych rozwiązań i przyciągnie uwagę odbiorcy. Rozwiązanie takie sprawdzi się w mocno zindywidualizowanych projektach, dla których powszechnie dostępne biblioteki ikonek to za mało. Trzeba pamiętać, że kreowanie własnego zestawu ikon to nie tylko operacja wymagająca czasu i programów do rysunku wektorowego, to przede wszystkim umiejętności graficzne i fantazja, a co za tym idzie niezbędny staje się grafik. Gotowe biblioteki ikon odpowiadają na potrzeby większości web deweloperów, nie tylko ze względu na powyższe powody, także dlatego, że ich symbolika jest powszechnie rozpoznawalna.

Biblioteka ikonek Font Awesome

Najbardziej znaną i najpopularniejszą biblioteką ikonek jest Font Awesome, lecz swoją sławę zawdzięcza nie tylko temu, że część udostępnionych obrazków jest darmowa (istnieje również możliwość wykupienia opcji PRO, która jest poszerzona o możliwość użycia dodatkowych ikonek). Proste w swojej konstrukcji obrazki są łatwe do powiązania z określającymi je słowami, wyszukanie interesującej nas ikonki jest banalne, tak samo jak zastosowanie jej w tekście czy jako ubarwienie pozycji menu. Główna z zalet implementowania fa-icons jest związana z częścią nazwy – tak, font oznacza, że fa-icons to czcionka, a nie obrazek, więc prawie nic nie waży i zapewnia wysokiej jakości grafiki, które świetnie wyglądają na każdym urządzeniu, dlatego właśnie twórcy responsywnych stron internetowych kochają fa-icons.

Jedna ikonka, wiele opcji

Niezaprzeczalną zaletą Font Awesome jest możliwość modyfikowania ikony do swoich potrzeb. Wprowadzone przez serwis różnego rodzaju udogodnienia pozwalają na zmianę wielkości, stylu, koloru czy orientacji ikonki – wszystko wykonuje się poprzez dopisanie odpowiedniej frazy do kodu obrazka. Własne grafiki służące jako ikonki nie dają tak szybkiej możliwości wprowadzenia zmian, za każdym razem musimy je pomniejszać czy powiększać i ponownie wgrywać na serwer oraz nie gwarantują poprawnego wyświetlania na różnych typach urządzeń. Pewnie teraz zastanawiacie się jak zmodyfikować fa-icons? Poniżej odpowiedzi na to pytanie.   - tak to ikonka Font Awesome.

Jak dodać fa-icon w tekście?

Wprowadzenie ikonek Font Awesome do tekstu jest banalne. Wystarczy wpisać fragment kodu odpowiadającego za wyświetlenie fa-icon:

<i class="[styl np. fas, far, fal] fa-[nazwa ikonki]"></i>

<i class="fas fa-thumbs-up"></i>

*Niekiedy konieczne jest wstawienie spacji nierozdzielającej między <i> </i> np. w szablonach Joomla opartych na SP Page Builder

W starszych wersjach fa-icons był jeden styl, nie było dodatkowego rozróżnienia na grubość linii, którą „narysowana” jest ikonka, stąd też klasa wyglądała następująco:

<i class="fa fa-thumbs-up"></i>

Jak zmienić styl fa-icon?

Niedawno Font Awesome wprowadzili rozróżnienie opcji wyświetlania ikon poprzez wprowadzenie zmiennych dla wyświetlania: regular, solid, light. W ten sposób fa-icon przestały być „fa” - dawne, różne nazwy ikon dla różnych stylów zostały zunifikowane np. qlock-o stało się qlock, a indywidualny wygląd uzyskujemy klasami:

fas – fa solid - większość darmowych fa-icons opiera się o tę klasę

<i class="fas fa-heart"></i>  

far – fa regular - istnieje wiele darmowych ikonek o tej klasie

<i class="far fa-heart"></i>  

fal – fa light - ikonki dla tej opcji dostępne są w płatnej wersji Font Awesome Pro

<i class="fal fa-heart"></i>

Można jeszcze spotkać się z klasą: fab, oznacza ona fa brands, czyli ikony marek np. twitter, facebook, github.

<i class="fab fa-facebook-square"></i>  

Jak powiększyć fa-icon?

Zmiana rozmiarów ikonek Font Awesome może wydawać się dość skomplikowana, lecz to tylko pozory, gdyż biblioteka posiada własne oznaczenie rozmiaru fa-icon:

fa-xs <i class="fas fa-thumbs-up fa-xs"></i>  

fa-sm <i class="fas fa-thumbs-up fa-sm"></i>  

fa-lg <i class="fas fa-thumbs-up fa-lg"></i>  

fa-2x <i class="fas fa-thumbs-up fa-2x"></i>  

fa-3x <i class="fas fa-thumbs-up fa-3x"></i>  

fa-4x <i class="fas fa-thumbs-up fa-4x"></i>  

fa-5x <i class="fas fa-thumbs-up fa-5x"></i>  

fa-7x <i class="fas fa-thumbs-up fa-7x"></i>  

fa-9x <i class="fas fa-thumbs-up fa-9x"></i>  

Jeżeli chcemy wprowadzić ikonkę w jej standardowym rozmiarze (unset), pozostajemy przy wersji bez rozszerzenia klasy:

<i class="fas fa-thumbs-up"></i>

Jak zmienić kolor fa-icon?

Zmiana koloru ikony Font Awesome odbywa się identycznie jak zmiana koloru czcionki, czyli wystarczy w klasie narzucić „style color”:

<i class="fas fa-palette" style="color: [wybrany kolor];"></i>

<i class="fas fa-palette" style="color: #FF7302;"></i>  

Istnieje również możliwość inwersji kolorów, szczególnie przydatna, gdy chcemy nałożyć na siebie dwie ikony w kolorze czarnym. Wykorzystanie i zapis klasy znajdziecie poniżej w kontekście nakładania się ikonek.

Jak obrócić fa-icon?

Jeżeli z jakichś powodów chcemy odwrócić ikonę fa o 90, 180 lub 270 stopni albo uzyskać jej lustrzane odbicie, wystarczy wykorzystać stworzoną do tego klasę:

fa-rotate-90 - 90 stopni <i class="fas fa-cat fa-rotate-90"></i>

fa-rotate-180 - 180 stopni <i class="fas fa-cat fa-rotate-180"></i>

fa-rotate-270 - 270 stopni <i class="fas fa-cat fa-rotate-270"></i>

fa-flip-horizontal - odbicie w poziomie <i class="fas fa-cat fa-flip-horizontal"></i>

fa-flip-vertical - odbicie w pionie <i class="fas fa-cat fa-flip-vertical"></i>

Jak stworzyć animowaną fa-icon?

Przeglądarki internetowe wspierające CSS3 mogą wyświetlić naszą ikonkę jako animowaną, czyli może się ona płynnie lub pulsacyjnie obracać. Uzyskujemy to za pomocą klas:

fa-spin - płynne obracanie (spin) <i class="fas fa-spinner fa-spin"></i> 

fa-pulse - obracanie pulsacyjne (pulse) <i class="fas fa-spinner fa-pulse"></i> 

Jak sprawić, żeby ikonki Font Awesome były tego samego rozmiaru?

Ikony fa mają różną szerokość i wysokość, dlatego stworzone z nich listy mogą być „nierówne”, lecz można temu zaradzić kolejną klasą:

fa-fw - stała szerokość (fixed width)

Oto przykład ikonek o różnych rozmiarach:

 <i class="fas fa-address-book fa-2x"></i>

 <i class="fas fa-address-card fa-2x"></i>

 <i class="fas fa-ad fa-2x"></i>

A tutaj narzucona klasa fa-fw:

 <i class="fas fa-address-book fa-2x fa-fw"></i>

 <i class="fas fa-address-card fa-2x fa-fw"></i>

 <i class="fas fa-ad fa-2x fa-fw"></i>

Nakładanie się fa-icon

Ciekawostką jest możliwość „łączenia” ikonek Font Awesome, czyli nakładania się jednej ikony na drugą. W ten sposób możemy stworzyć znaki zakazu, wprowadzić ikonkę w okrąg lub kwadrat. Zazwyczaj w przypadku wykorzystywania tej funkcji, potrzebna jest również opcja zmniejszenia jednej z fa-icon. Do tego celu służy klasa fa-stack oraz z opcją zmiany wielkości fa-stack-1x dla ikon w standardowej wielkości i fa-stack-2x dla większej ikony. Skorzystanie w fa w ten sposób możliwe jest poprzez <span>. W przypadku, gdy mamy dwie ikonki w kolorze czarnym, to dla ikony "na wierzchu" niezbędne jest nadanie klasy fa-inverse, która zmieni jej kolor na biały. Klasy tej można także używać w innych przypadkach zamiast stylu color, oczywiście jeśli chcemy uzyskać biel.

fab fa-facebook-messenger wewnątrz far fa-square z zastosowaniem fa-stack:

<span class="fa-stack fa-lg"> <i class="far fa-square fa-stack-2x"></i> <i class="fab fa-facebook-f fa-stack-1x"></i> </span>

fab fa-facebook-messenger wewnątrz far fa-circle z zastosowaniem fa-stack oraz inwersji fa-inverse kolorów na ikonce facebook:

<span class="fa-stack fa-lg"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>

Nakładanie fa-icons można również zastosować do stworzenia znaków zakazu, poprzez dodanie klasy text-danger ikona uzyska kolor czerwony. W przykładzie fas fa-fire wewnątrz fa-ban z zastosowaniem text-danger:

<span class="fa-stack fa-lg"> <i class="fas fa-fire fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger"></i>

Jeszcze jeden przykład, tym razem fas fa-ban nałożone na fas fa-dog bez text-danger, lecz powiększone - w powyższych przykładach zastosowana została klasa: span class="fa-stack fa-lg", w poniższym span class="fa-stack fa-5x":

<span class="fa-stack fa-5x"> <i class="fas fa-dog fa-stack-1x"></i> <i class="fas fa-ban fa-stack-2x"></i>

Wykorzystanie fa-icons do stworzenia wypunktowanej listy

Ikonki Font Awesome można również wykorzystać do wypunktowania elementów listy – możemy stworzyć listę z ikonkami „check” lub innymi - jeżeli obrazki będą różniły się wielkością, warto dodać do nich klasę ustawiającą stałą szerokość fa-fw. W celu stworzenia listy do znacznika <ul> dodajemy klasę fa-ul, a wewnątrz każdego znacznika wypunktowania <li> umieszczamy standardowy kod z ikonką klasy fa-li:

<ul class="fa-ul">
<li><i class="fa-li fas fa-check"></i>Do wypunktowania</li>
<li><i class="fa-li fas fa-check-double"></i>listy</li>
<li><i class="fa-li fas fa-check-square"></i>można wykorzystać</li>
<li><i class="fa-li fas fa-check-circle"></i>fa-icons typu check</li>
</ul>

• Do wypunktowania
• listy
• można wykorzystać
• fa-icons typu check

Zamiast znaczników typu "check" można wykorzystać inne ikonki:

<ul class="fa-ul">
<li><i class="fa-li fas fa-home"></i>Zamiast znaczników typu "check"</li>
<li><i class="fa-li fas fa-address-book"></i>można użyć</li>
<li><i class="fa-li fas fa-mobile-alt"></i>dowolnych</li>
<li><i class="fa-li fas fa-dollar-sign"></i>ikonek Font Awesome</li>
</ul>

• Zamiast znaczników typu "check"
• można użyć
• dowolnych
• ikonek Font Awesome

Jak użyć fa-icon do cytatu?

Zazwyczaj w skrypcie strony dodaje się klasy odpowiadające za cytaty, aby wszystko wyglądało fajnie, lecz czasem zdarza się, że web developer nie zaprogramował nam dodatkowych funkcji PRO, wtedy możemy zastosować fa-icon do cytatu. W tym celu stworzono klasy pozwalające na umieszczenie ikonki po lewej lub prawej stronie tekstu:

fa-pull-left – ustawia ikonę obok tekstu po lewej stronie

<i class="fa fa-quote-left fa-2x pull-left">

fa-pull-right – ustawia ikonę obok tekstu po prawej stronie

<i class="fa fa-quote-right fa-2x pull-right">

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Dodatkowo możemy skorzystać z klasy, która ustawi wokół fa-icon jasną ramkę:

fa-border - ramka wokół ikonki

<i class="fa fa-quote-left fa-2x pull-right fa-border">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat

Oto standardowe opcje wykorzystania Font Awesome, lecz jeśli chcecie i macie umiejętności, możecie połączyć fa-icons z Bootstrapem i wykorzystać je do wzbogacenia nie tylko tekstów, lecz także menu czy formularzy.