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.

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

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.

Chcesz ​nauczyć ​się ​czegoś ​nowego?​

Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron www - kursy dla początkujących i zaawansowanych

Jakub Jurkian

Pracuję jako Front End Developer w Londynie. 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).

  • >