Ikony materiałów

Google udostępnia zestaw 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.

Ładowanie czcionki (biblioteka)

Aby załadować bibliotekę materiałów-ikon, skopiuj i wklej następujący wiersz w sekcji <head> strony internetowej.

<head>
   <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
</head>

Korzystanie z Icon

Ikony materiałów Google zapewniają długą listę ikon. Wybierz jedną z nich i dodaj nazwę klasy icon do dowolnego elementu HTML w tagu <body>. W poniższym przykładzie użyliśmy ikony o nazwieaccessibility należący do kategorii akcji.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
   </head>
	
   <body>
      <i class = "material-icons">accessibility</i>
   </body>
	
</html>

Wytworzy następujący wynik -

Definiowanie rozmiaru

Możesz zwiększyć lub zmniejszyć rozmiar ikony, definiując jej rozmiar w CSS i używając go razem z nazwą klasy, jak pokazano poniżej. W poniższym przykładzie zadeklarowaliśmy rozmiar jako 6 em.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.mysize {font-size: 6em;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons mysize">accessibility</i>
   </body>
	
</html>

Wytworzy następujący wynik -

Definiowanie koloru

Możesz użyć CSS, aby zdefiniować kolor ikony. Poniższy przykład pokazuje, jak zmienić kolor ikony o nazwieaccessibility.

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 6em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

Wytworzy następujący wynik -

Lista kategorii

Czcionka Material Icons firmy Google zawiera 519 ikon w następujących kategoriach -

Ikony akcji
Ikony alertów
Ikony AV
Ikony komunikacji
Ikony treści
Ikony urządzeń
Ikony edytora
Ikony plików
Ikony sprzętu
Ikony obrazu
Ikony map
Ikony nawigacji
Ikony powiadomień
Ikony społeczne
Przełącz ikony

Aby użyć którejkolwiek z tych ikon, musisz zastąpić nazwę klasy w programach podanych w tym rozdziale nazwą klasy żądanej ikony. W kolejnych rozdziałach tej Jednostki (Ikony materiałów) wyjaśniliśmy z podziałem na kategorie użycie i odpowiednie wyniki różnych ikon materiałów.