Font Awesome, Material Icons – obowiązkowy pakiet ikon dla webmasterów

Data dodania: jakiś czas temu

Uczysz się języka HTML? A może ogarniasz już style CSS? Każdy kto projektuje strony internetowe wie jakim problemem potrafią być obrazki, zwłaszcza te małe, których zadanie jest czysto informacyjne. Od dłuższego czasu można je zastąpić specjalną czcionką. Poznajcie Font Awesome oraz Material Icons.

Czcionki zamiast obrazków

Ż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).

Dlaczego fonty są moim zdaniem lepsze?

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.

Przykład implementacji Font Awesome – poradnik

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 ikonę.

Przykład implementacji Material Icons – poradnik

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.

Podsumowanie

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;


PS. jeśli masz konto na Facebooku, polub fanpage Konkretnego. Dzięki!




Tagi: , , , , , , , , ,

Bądź miły! Uwielbiam wchodzić z Wami w dyskusję, proszę jednak, by krytyka była konstruktywna. Komentarz, który ma na celu obrażać mnie lub moich Czytelników może zostać usunięty. Tutaj każdy ma czuć się dobrze :)

Jestem także tutaj


O mnie

Marcin Romanowicz
Więcej o mnie

Discord

Chcesz ze mną pograć?
Wbijaj na mój Discord

Partnerzy











O blogu

Konkretny.pl to blog technologiczny, którego tematyka porusza kilka specjalistycznych dziedzin. Jednymi z najważniejszych są zagadnienia dotyczące technologii i Internetu, ale nie brakuje tutaj również typowych tekstów dotyczących finansów, marketingu, programowania, a nawet gier komputerowych. Życzę przyjemnej lektury :)


Social Media

 



© 2011-2017 Marcin Romanowicz. Wszelkie prawa zastrzeżone.

Wszystkie posty piszę w dobrej wierze. Nie odpowiadam jednak za wszelkie szkody, treść komentarzy oraz autentyczność informacji na stronie. Informuję, że publikowane pliki zostały sprawdzone programem antywirusowym w aktualnej wersji. Nie biorę jednak odpowiedzialności, jeśli coś się stanie.

| O mnie |   | Polityka Prywatności |   | Kontakt |