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 🙂
