Skąd brać ikonki na stronę? Najlepiej z Google, gdzie znajdziesz różnego rodzaju TOP listy.

Szukaj ich pod hasłem „web icons”, „icon fonts”, „free icon sets”. W większości przypadków będą to ikonki obrazkowe, najczęściej w formacie PNG.

Czasami jest to dobre rozwiązanie, ale nie najlepsze, bo przy powiększaniu strony „będzie widać piksele”.

Jeżeli Twoja ikonka jest zapisana w formacie wektorowym, takim jak SVG, to choćbyś powiększył ją milion razy – jakość pozostanie ta sama. Dodatkowo, wykorzystując możliwości CSS3 możesz zmieniać jej kolor, dodać cień, obrócić o 21 stopni itd.

Najpopularniejsze zestawy ikonek wektorowych

Jest ich całkiem dużo, ale do najczęściej używanych trzeba zaliczyć Font Awesome (prawie 700), Ionicons (kilkaset) i Material Icons (ponad 900).

Jak zainstalować ikonki na stronie?

Najprościej zrobić to korzystając z linków, które często dostępne są na popularnych CDNach. Przykładowo link do Font Awesome znajduje się tutaj i możesz go wstawić tak, jakbyś ładował kolejne style CSS na swoją stronę. Gdy dołączasz taki plik do strony, jest tam wszystko co potrzebne, by ikonki zaczęły działać.

Wtedy wystarczy wykorzystać (często) element <i> z odpowiednią klasą, a ikonka pokaże się na Twojej stronie.

Optymalizacja ikonek

Samo Font Awesome to 675 ikonek. Powiedz mi, ile z nich jesteś w stanie użyć na swojej stronie. 5-10? Czasami może więcej, ale pewnie nigdy nie użyjesz nawet 10% z całej puli.

Oznacza to, że za każdym razem, gdy Twoja strona się ładuje, ładuje się też prawie 700 ikonek, które swoje ważą.

Żeby zmniejszyć rozmiar takiej paczki, warto wykorzystać takie narzędzie, jak Fontello. Zasada działania jest bardzo prosta: masz dostępne różne zestawy ikonek i to, co musisz zrobić, to wybrać te z nich, które Ciebie interesują.

Na koniec pobierasz taką paczkę i dołączasz do swojej strony.

Skąd brać ikonki na stronę + jak je zoptymalizować?
Ocena: 5 - 4 głosów

Przeczytaj też...

Jakub Jurkian

Od ponad 11 lat jestem programistą-pasjonatem, a strony (i wszystko co z nimi związane) tworzę od 6 lat. Jestem też autorem kursów wideo - od 2013 roku prowadzę kanał na YouTube i tego bloga.Zaczynałem od pisania artykułów dla jednego z czołowych polskich portali IT - benchmark.pl. Prywatnie od 10 lat jestem związany z kulturą hip-hop (głównie taniec breakdance).

2 komentarzy

Kacper3 października 2017, 17:15

Wstawianie ikonek za pomocą znacznika i jest błędem. Comandeer pisał o tym na swoim blogu:

https://comandeer.github.io/blog/a11y/html-css/2017/02/28/o-ikonkach-slow-kilka.html

Odpowiedz

    Jakub Jurkian3 października 2017, 18:31

    Dzięki Kacper.
    Widzę, że trzeba zacząć więcej czytać o accessibility :)

    Odpowiedz

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

*