Materielle Symbole

Google bietet eine Reihe von 750 Symbolen an, die unter "Richtlinien für das Materialdesign" erstellt wurden. Diese werden als bezeichnet Material DesignSymbole. Diese Symbole sind einfach und unterstützen alle modernen Webbrowser. Da diese Symbole vektorbasiert sind, sind sie auch skalierbar. Um diese Symbole zu verwenden, müssen wir die Schriftart (Bibliothek) laden.material-icons.

Laden der Schriftart (Bibliothek)

Um die Material-Icons-Bibliothek zu laden, kopieren Sie die folgende Zeile und fügen Sie sie in den Abschnitt <head> einer Webseite ein.

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

Verwenden des Symbols

Die Materialsymbole von Google bieten eine lange Liste von Symbolen. Wählen Sie eine davon aus und fügen Sie den Namen der Symbolklasse zu einem beliebigen HTML-Element im <body> -Tag hinzu. Im folgenden Beispiel haben wir das Symbol mit dem Namen verwendetaccessibility das gehört zur Aktionskategorie.

<!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>

Es wird die folgende Ausgabe erzeugt -

Größe definieren

Sie können die Größe eines Symbols erhöhen oder verringern, indem Sie seine Größe im CSS definieren und zusammen mit dem Klassennamen wie unten gezeigt verwenden. Im folgenden Beispiel haben wir die Größe als 6 em deklariert.

<!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>

Es wird die folgende Ausgabe erzeugt -

Farbe definieren

Mit dem CSS können Sie die Farbe eines Symbols definieren. Das folgende Beispiel zeigt, wie Sie die Farbe eines aufgerufenen Symbols ändern könnenaccessibility.

<!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>

Es wird die folgende Ausgabe erzeugt -

Liste der Kategorien

Die Material Icons-Schriftart von Google enthält 519 Symbole in den folgenden Kategorien:

Aktionssymbole
Warnsymbole
AV-Symbole
Kommunikationssymbole
Inhaltssymbole
Gerätesymbole
Editor-Symbole
Dateisymbole
Hardware-Symbole
Bildsymbole
Kartensymbole
Navigationssymbole
Benachrichtigungssymbole
Soziale Ikonen
Symbole umschalten

Um eines dieser Symbole zu verwenden, müssen Sie den Klassennamen in den in diesem Kapitel angegebenen Programmen durch den Klassennamen des gewünschten Symbols ersetzen. In den kommenden Kapiteln dieser Einheit (Materialsymbole) haben wir die Verwendung und die jeweiligen Ausgaben verschiedener Materialsymbole kategorisch erläutert.