Material - Inhaltssymbole

In diesem Kapitel wird die Verwendung der (materiellen) Inhaltssymbole von Google erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

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

Die folgende Tabelle enthält die Verwendung und die Ergebnisse der Inhaltssymbole von Google (Material). Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung Ergebnis
<i class = "material-icons custom"> hinzufügen </ i> hinzufügen
<i class = "material-icons custom"> add_box </ i> add_box
<i class = "material-icons custom"> add_circle </ i> add_circle
<i class = "material-icons custom"> add_circle_outline </ i> add_circle_outline
<i class = "material-icons custom"> Archiv </ i> Archiv
<i class = "material-icons custom"> Rücktaste </ i> Rücktaste
<i class = "material-icons custom"> Block </ i> Block
<i class = "material-icons custom"> löschen </ i> klar
<i class = "material-icons custom"> content_copy </ i> content_copy
<i class = "material-icons custom"> content_cut </ i> content_cut
<i class = "material-icons custom"> content_paste </ i> content_paste
<i class = "material-icons custom"> erstellen </ i> erstellen
<i class = "material-icons custom"> Entwürfe </ i> Entwürfe
<i class = "material-icons custom"> filter_list </ i> filter_list
<i class = "material-icons custom"> flag </ i> Flagge
<i class = "material-icons custom"> font_download </ i> font_download
<i class = "material-icons custom"> weiterleiten </ i> nach vorne
<i class = "material-icons custom"> Geste </ i> Geste
<i class = "material-icons custom"> Posteingang </ i> Posteingang
<i class = "material-icons custom"> Link </ i> Verknüpfung
<i class = "material-icons custom"> mail </ i> Mail
<i class = "material-icons custom"> markunread </ i> als ungelesen markieren
<i class = "material-icons custom"> wiederholen </ i> wiederholen
<i class = "material-icons custom"> entfernen </ i> entfernen
<i class = "material-icons custom"> remove_circle </ i> remove_circle
<i class = "material-icons custom"> remove_circle_outline </ i> remove_circle_outline
<i class = "material-icons custom"> antworte </ i> Antworten
<i class = "material-icons custom"> reply_all </ i> reply_all
<i class = "material-icons custom"> Bericht </ i> Bericht
<i class = "material-icons custom"> speichern </ i> sparen
<i class = "material-icons custom"> select_all </ i> Wählen Sie Alle
<i class = "material-icons custom"> senden </ i> senden
<i class = "material-icons custom"> sort </ i> Sortieren
<i class = "material-icons custom"> text_format </ i> Textformat
<i class = "material-icons custom"> stay_current_portrait </ i> stay_current_portrait
<i class = "material-icons custom"> rückgängig machen </ i> rückgängig machen