Material - Hardware-Symbole

In diesem Kapitel wird die Verwendung der Hardware-Symbole von Google (Material) 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 Hardware-Symbole 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"> cast </ i>	Besetzung
<i class = "material-icons custom"> cast_connected </ i>	cast_connected
<i class = "material-icons custom"> Computer </ i>	Computer
<i class = "material-icons custom"> desktop_mac </ i>	desktop_mac
<i class = "material-icons custom"> desktop_windows </ i>	desktop_windows
<i class = "material-icons custom"> developer_board </ i>	developer_board
<i class = "material-icons custom"> device_hub </ i>	device_hub
<i class = "material-icons custom"> Dock </ i>	Dock
<i class = "material-icons custom"> Gamepad </ i>	Gamepad
<i class = "material-icons custom"> Headset </ i>	Headset
<i class = "material-icons custom"> headset_mic </ i>	headset_mic
<i class = "material-icons custom"> Tastatur </ i>	Tastatur
<i class = "material-icons custom"> keyboard_arrow_down </ i>	keyboard_arrow_down
<i class = "material-icons custom"> keyboard_arrow_left </ i>	keyboard_arrow_left
<i class = "material-icons custom"> keyboard_arrow_right </ i>	keyboard_arrow_right
<i class = "material-icons custom"> keyboard_arrow_up </ i>	keyboard_arrow_up
<i class = "material-icons custom"> keyboard_backspace </ i>	keyboard_backspace
<i class = "material-icons custom"> keyboard_capslock </ i>	keyboard_capslock
<i class = "material-icons custom"> keyboard_hide </ i>	keyboard_hide
<i class = "material-icons custom"> keyboard_return </ i>	keyboard_return
<i class = "material-icons custom"> keyboard_tab </ i>	keyboard_tab
<i class = "material-icons custom"> keyboard_voice </ i>	keyboard_voice
<i class = "material-icons custom"> Laptop </ i>	Laptop
<i class = "material-icons custom"> Laptop_chromebook </ i>	Laptop_chromebook
<i class = "material-icons custom"> Laptop_Mac </ i>	Laptop_Mac
<i class = "material-icons custom"> Laptop-Fenster </ i>	Laptop_Fenster
<i class = "material-icons custom"> Speicher </ i>	Erinnerung
<i class = "material-icons custom"> Maus </ i>	Maus
<i class = "material-icons custom"> phone_android </ i>	phone_android
<i class = "material-icons custom"> phone_iphone </ i>	phone_iphone
<i class = "material-icons custom"> phonelink </ i>	Telefonverbindung
<i class = "material-icons custom"> phonelink_off </ i>	phonelink_off
<i class = "material-icons custom"> power_input </ i>	power_input
<i class = "material-icons custom"> Router </ i>	Router
<i class = "material-icons custom"> Scanner </ i>	Scanner
<i class = "material-icons custom"> Sicherheit </ i>	Sicherheit
<i class = "material-icons custom"> sim_card </ i>	SIM Karte
<i class = "material-icons custom"> Smartphone </ i>	Smartphone
<i class = "material-icons custom"> Sprecher </ i>	Lautsprecher
<i class = "material-icons custom"> Sprechergruppe </ i>	Sprechergruppe
<i class = "material-icons custom"> tablet </ i>	Tablette
<i class = "material-icons custom"> tablet_android </ i>	tablet_android
<i class = "material-icons custom"> tablet_mac </ i>	tablet_mac
<i class = "material-icons custom"> Spielzeug </ i>	Spielzeuge
<i class = "material-icons custom"> tv </ i>	Fernseher
<i class = "material-icons custom"> ansehen </ i>	Uhr