Font Awesome – wstawianie ikon na stronę

Font Awesome – wstawianie ikon na stronę

W tym temacie pokażę Wam jak wstawić ikonki na stronę, które są wykonane za pomocą kodu css. Dzięki temu jednocześnie będziecie mogli dołączać łatwo i szybko wiele ciekawych ikon oraz przyspieszycie stronę.

Wchodzimy na stronę https://fontawesome.com

Klikamy button „start using free” i kopiujemy ten kod który się tam znajduje:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

Wklejamy ten kod w sekcji nagłówka <head></head>.

Od teraz można dołączać do strony ikonki z serwisu Font Awesome. Jak to się robi?

Wchodzimy na główną stronę Font Awesome, oglądamy ikonki w poszukiwaniu interesującej. Zaznaczamy „free”, by wyszukało tylko darmowe. Klikamy na ikonkę i potem na przycisk „start using this icon”.

Pojawiło się nam okienko z kodem, który kopiujemy.

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

Wklejamy ten kod w wybrane przez nas miejsce na stronie. Od teraz mamy ikonkę maila.

Ikonka jest mała, ale możemy ją dowolnie ostylować za pomocą css, a możemy też do kodu ikonki dopisać odpowiednie style, które zmienią jej rozmiar, kolor, grubość krawędzi itp.

Dopisujemy do kodu: fa-2x
To oznacza, że powiększamy ikonkę.

To oznacza, że powiększamy ikonkę.

<i class="far fa-envelope fa-2x"></i>

Możemy też zmienić jej kolor, np. dopisać kod:
style=”color: #339af0;

<i class="far fa-envelope fa-2x" style="color: #339af0;"></i>

W dokumentacji na stronie: https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use możemy zobaczyć jakie jeszcze kody można użyć do ikonek.

Można też mieć animowane ikony, ikony w stylu listy ul li, można je obracać, odbijać lustrzanie. Jest wiele ciekawych opcji. Dzięki temu nie musimy latać po stronach i szukać ikonek, wszystko mamy w jednym miejscu i możemy nadać im przeróżne style. Dodatkowy plus takiego rozwiązania to taki, że strona nam się szybciej wczytuje i uzyskamy lepsze wyniki w page speed testach 🙂

Dodaj komentarz

avatar
  Subscribe  
Powiadom o
Close Menu