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.