Ikony WWW - wprowadzenie

Ikona to symbol używany do reprezentowania określonej czynności lub możliwości na stronie internetowej. Ikony są używane zarówno w dokumentach, jak iw aplikacjach i mogą być wybierane lub niewybieralne. Na przykład obrazy, które widzimy na przyciskach aplikacji, są ikonami i te przyciski można wybrać. Podobnie, gdy używamy ikony jako logo firmy, zwykle nie można jej wybrać.

W środowisku Windows, jeśli wyciszymy głośność systemową, zostanie to przedstawione za pomocą ikony, jak pokazano poniżej.

Korzystając z ikon internetowych, możemy przedstawić stronę wczytywania, wyłączoną opcję, łącze, przekierowanie itp. Ikony te można odwracać, obracać, zmieniać ich rozmiar, obramować, odwrócić i pokolorować.

Icon Czcionki

Ikony Czcionki zawierają symbole i glify. Po załadowaniu żądanej czcionki możesz użyć dowolnej ikony dostarczonej przez tę czcionkę, używając nazwy klasy ikony. Możemy również zastosować różne kolory do ikon i zmienić ich rozmiar za pomocą właściwości CSS. Istnieje kilka bibliotek ikon (czcionek), które udostępniają ikony. Ten samouczek skupia się na trzech głównych czcionkach, a mianowicie -

Font Awesome
Glify Bootstrap
Ikony materiałów Google

Font Awesome

Ta czcionka zapewnia 519 darmowych skalowalnych ikon wektorowych. Ta biblioteka jest całkowicie bezpłatna, zarówno do użytku osobistego, jak i komercyjnego. Te ikony można łatwo dostosować. Pierwotnie zostały opracowane dla Bootstrap.

Glify Bootstrap

Jest to biblioteka ikon monochromatycznych dostępnych w formatach obrazów rastrowych, formatach obrazów wektorowych oraz jako czcionki. Zawiera ponad 250 glifów w formacie czcionki. Możesz używać tych czcionek w swoich projektach internetowych. Te ikony nie są darmowe, jednak można ich używać w projektach opartych na Bootstrap bez konieczności ich kupowania.

Ikony materiałów Google

Google udostępnia około 750 ikon zaprojektowanych zgodnie z „wytycznymi dotyczącymi projektowania materiałów”, znanymi jako Material Designikony. Te ikony są proste i obsługują wszystkie nowoczesne przeglądarki internetowe. Ponieważ te ikony są oparte na wektorach, są również skalowalne. Aby użyć tych ikon, musimy załadować czcionkę (bibliotekę)material-icons.