Material - Kommunikationssymbole

In diesem Kapitel wird die Verwendung der Kommunikationssymbole 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 Kommunikationssymbole 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"> business </ i>	Geschäft
<i class = "material-icons custom"> Aufruf </ i>	Anruf
<i class = "material-icons custom"> call_made </ i>	call_made
<i class = "material-icons custom"> call_merge </ i>	call_merge
<i class = "material-icons custom"> call_missed </ i>	call_missed
<i class = "material-icons custom"> call_received </ i>	call_received
<i class = "material-icons custom"> call_split </ i>	call_split
<i class = "material-icons custom"> Chat </ i>	Plaudern
<i class = "material-icons custom"> chat_bubble </ i>	chat_bubble
<i class = "material-icons custom"> chat_bubble_outline </ i>	chat_bubble_outline
<i class = "material-icons custom"> clear_all </ i>	alles löschen
<i class = "material-icons custom"> Kommentar </ i>	Kommentar
<i class = "material-icons custom"> contact_phone </ i>	Kontakt-Telefon
<i class = "material-icons custom"> Kontakte </ i>	Kontakte
<i class = "material-icons custom"> dialer_sip </ i>	dialer_sip
<i class = "material-icons custom"> Wähltastenfeld </ i>	Wahltastatur
<i class = "material-icons custom"> Forum </ i>	Forum
<i class = "material-icons custom"> import_export </ i>	Import Export
<i class = "material-icons custom"> invert_colors_off </ i>	invert_colors_off
<i class = "material-icons custom"> live_help </ i>	Lebenshilfe
<i class = "material-icons custom"> location_off </ i>	location_off
<i class = "material-icons custom"> location_on </ i>	location_on
<i class = "material-icons custom"> Nachricht </ i>	Botschaft
<i class = "material-icons custom"> no_sim </ i>	no_sim
<i class = "material-icons custom"> Telefon </ i>	Telefon
<i class = "material-icons custom"> phonelink_erase </ i>	phonelink_erase
<i class = "material-icons custom"> phonelink_lock </ i>	phonelink_lock
<i class = "material-icons custom"> phonelink_ring </ i>	phonelink_ring
<i class = "material-icons custom"> phonelink_setup </ i>	phonelink_setup
<i class = "material-icons custom"> portable_wifi_off </ i>	portable_wifi_off
<i class = "material-icons custom"> present_to_all </ i>	present_to_all
<i class = "material-icons custom"> ring_volume </ i>	ring_volume
<i class = "material-icons custom"> Lautsprechertelefon </ i>	Lautsprechertelefon
<i class = "material-icons custom"> stay_current_landscape </ i>	stay_current_landscape
<i class = "material-icons custom"> stay_current_portrait </ i>	stay_current_portrait
<i class = "material-icons custom"> stay_primary_landscape </ i>	stay_primary_landscape
<i class = "material-icons custom"> stay_primary_portrait </ i>	stay_primary_portrait
<i class = "material-icons custom"> swap_calls </ i>	swap_calls
<i class = "material-icons custom"> Texte </ i>	Texte
<i class = "material-icons custom"> Voicemail </ i>	Voicemail
<i class = "material-icons custom"> vpn_key </ i>	vpn_key
<i class = "material-icons custom"> E-Mail </ i>	Email
<i class = "material-icons custom"> call_end </ i>	call_end