Żeby było konkretnie i bez zbędnego lania wody, zobaczcie sobie przykładowy pakiet ikon zarówno Font Awesome jak i Material Icons. Widzicie już w czym rzecz? Dla wielu znanych elementów, czy to znaczek ikony niepełnosprawności, czy logo znanej firmy nie trzeba tworzyć specjalnej grafiki. Wystarczy użyć do tego specjalnej czcionki (fontu).
Używanie tego rodzaju czcionek jest moim zdaniem lepsze z kilku powodów. Przede wszystkim są w pełni skalowalne. Fonty są rysowane wektorowo, a to oznacza, że można je dowolnie modyfikować pod względem wielkości bez utraty jakości. W HTMLu i CCSie zachowują się jak klasyczne czcionki. Można je zatem powiększać, zmieniać im kolor oraz łatwo dodawać do treści strony. Jeśli zajdzie konieczność zmian na stronie, wystarczy zedytować kod HTML lub CSS by zmienić im wygląd bez konieczności używania programów graficznych. Niektóre fonty można także animować co zobaczycie tutaj.
Oto ekstremalnie skrócony poradnik użycia Font Awesome. Należy pobrać paczkę z fontami oraz umieścić w odpowiednim folderze w swoim projekcie. Następnie w sekcji
strony wrzucacie poniższą linijkę (oczywiście uzupełnijcie ścieżkę poprawnie):<link rel="stylesheet" href="ścieżka_do_waszego_pliku_fontami/font-awesome.min.css">
Co dalej? Nic. Już działa. Sprawdźmy. Przejrzyjcie katalog Icons dostępny na stronie Font Aweosme i kliknijcie jakąś. Pojawi się Wam jej osobna karta, a w niej informacje jak dodać ją do strony. Np.
<i class="fa fa-user-circle" aria-hidden="true"></i>
doda nam tę ikonę.
W przypadku Material Icons sprawa wygląda bardzo podobnie jak w Font Awesome. Przedstawię jednak szybszą opcję i zamiast pobierać całą paczkę, po prostu zaimplementujemy je ze zdalnego serwera Google.
W sekcji
strony wrzucacie:<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Następnie ikony w kodzie strony umieszczacie podobnie, czyli wybieracie sobie jakąś z katalogu i wrzucacie jej kod. Np.
<i class="material-icons">local_grocery_store</i>
doda nam ikonę wózka sklepowego.
Jak widzicie, stosowanie fontów zamiast grafik może być bardzo wygodne. Jeśli ktoś z Was chciałby zapoznać się z wersją wideo tego poradnika, zapraszam na film przygotowany specjalnie z tej okazji. Nie zapomnij zasubskrybować kanału 🙂
&nbps;
