Twórcy stron internetowych są bardzo przyzwyczajeni do używania ikon do reprezentowania określonej akcji lub ikona może graficznie reprezentować dowolne polecenie lub działanie lub wskaźnik na stronie internetowej. Ikony są używane zarówno w dokumentach, jak i aplikacjach i można je wybrać lub nie.
Na przykład obrazy, które widzimy na przyciskach aplikacji, to wszystkie ikony i te przyciski można wybrać.
Aby ułatwić projektowanie i programowanie stron internetowych, opracowano niektóre biblioteki ikon czcionek, czyli ikony, które można wstawiać tak, jakby były tekstem i są dostępne do wykorzystania na stronach HTML witryny, oszczędzając wiele pracy dla użytkowników, projektantów i programistów.
W tym samouczku przyjrzymy się niektórym bibliotekom, takim jak Font Awesome, Bootstrap Glyphicons i Material Design Google, które są bibliotekami ze wstępnie ustawionymi czcionkami ikon często używanymi przez twórców stron internetowych.
Niesamowite narzędzia i biblioteka czcionek
Font Awesome to biblioteka czcionek, która renderuje ikony za pomocą zestawu narzędzi opartych na CSS. To narzędzie zostało opracowane do użytku z Twitter Bootstrap, ale może być używane indywidualnie jako arkusze stylów na dowolnej stronie internetowej.
Zaletą bycia biblioteką CSS jest to, że działa na dowolnej przeglądarce i urządzeniu, a nawet dostosowuje się do dowolnej rozdzielczości ekranu.
Bibliotekę można pobrać ze strony Font Awesome. Inną opcją jest skorzystanie z bezpośredniego linku do biblioteki:
Zobaczmy przykład jak zaimplementować ikony dla sieci społecznościowych za pomocą Font Awesome, tworzymy plik html i dodajemy następujący kod:
Czcionka Awesome - ikony mediów społecznościowych
Każda ikona jest reprezentowana przez ikonę klasy fa, więc na przykład ikona YouTube będzie fa-youtube, wynik po wyświetleniu w przeglądarce będzie następujący:
Następnie możemy dodać własne klasy CSS lub zmodyfikować predefiniowaną, aby dostosować się do naszego projektu, na przykład między tagami head dodajemy następujący kod CSS.
Dekoracja ikon przez CSS
Następnie wykonujemy w przeglądarce, a wynik będzie następujący:
Widzimy, że zastosowaliśmy CSS do każdej ikony i nie dodaliśmy żadnych obrazów. Inną opcją poprawy widoczności jest zmiana najedź klasą, to znaczy, gdy mysz znajduje się nad ikoną, zmień kolor litery.
Aby to zrobić, zmieniamy kolor w następującej linii:
.social-icons .fa: hover {kolor: zielony; } Rezultat po najechaniu kursorem na ikonę będzie następujący:
Możemy to również zrobić z tłem każdej ikony, zmieniając właściwość background na kolor, który nam się podoba.
Wszystkie dostępne ikony można zobaczyć na stronie Font Awesome, ikony są uporządkowane według kategorii.
Używanie tego typu czcionki ikon do naszych projektów internetowych pozwala nam przyspieszyć ładowanie strony, ponieważ nie potrzebujemy obrazów i oferujemy wyższą jakość (szczególnie na urządzeniach mobilnych podczas powiększania)
Narzędzia i biblioteka Glyphicons Bootstrap
Glyphicons Bootstrap to biblioteka ikon czcionek. Oferuje szeroką gamę ikon w formacie czcionki. Te ikony są bezpłatne i możesz również rozszerzyć bibliotekę o ikony płatne. Darmowe ikony mogą być używane w projektach internetowych bez konieczności ich kupowania. Ta biblioteka jest zorientowana na ikony przycisków, które wykonują pewne funkcje, takie jak drukowanie, wyszukiwanie, zapisywanie itp.
Ta biblioteka jest dołączona jako arkusze stylów w Bootstrap, aby z niej skorzystać, możemy pobrać Bootstrap z jego oficjalnej strony lub skorzystać z następującego linku:
Możemy również zobaczyć ikony według kategorii na stronie Glyphicons.
Następnie zobaczmy przykład, w którym używamy tej biblioteki do ikon przycisków i elementów wprowadzania danych w formularzu:
Glyphicon Bootstrap - GuzikiTestowaliśmy na urządzeniu mobilnym tak, jak by to wyglądało:Glyphicon Bootstrap - Guziki
Szukaj Drukuj Zaloguj Kup
Stosujemy ikonę listy do wyboru
Samochody Motocykle
Zaletą korzystania z ikon czcionek lub ikon czcionek jest to, że nie trzeba wywoływać obrazu lub ikony, ponieważ obrazy są w formacie svg w pliku css biblioteki, a te obrazy są skalowalne.
Kompletna biblioteka może mieć od 10Kb do 40Kb, co zwiększa szybkość ładowania strony.
Ikony są tekstowe, więc możemy nimi manipulować za pomocą CSS i będą reagować na każde zdarzenie, które programujemy za pomocą Jquery.
Jeśli we właściwości CSS Font wskazujemy rozmiar czcionki w em na przykład font-size: 4em ikona będzie responsywna i dostosuje się do każdego urządzenia. Mogą być również używane do programowania aplikacji responsywnych za pomocą frameworków, jak widać w tutorialu, programowania aplikacji mobilnych za pomocą Ionic Framework, te ikony są również używane.
Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt
