Skąd brać ikonki na stronę + jak je zoptymalizować?

Skąd brać ikonki - Font Awesome

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ć.

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

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

<i class="fa fa-home"></i>

 

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.

2 myśli na “Skąd brać ikonki na stronę + jak je zoptymalizować?”

Dodaj komentarz

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