Materiale - Icone sociali

Questo capitolo spiega l'utilizzo delle icone social (materiali) di Google. Assumilocustom è il nome della classe CSS in cui abbiamo definito la dimensione e il colore, come mostrato nell'esempio riportato di seguito.

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

La tabella seguente contiene l'utilizzo e i risultati delle icone social (materiali) di Google. Sostituisci il tag <body> del programma precedente con il codice fornito nella tabella per ottenere i rispettivi output -

Utilizzo Risultato
<i class = "material-icons custom"> torta </i> torta
<i class = "material-icons custom"> dominio </i> dominio
<i class = "material-icons custom"> gruppo </i> gruppo
<i class = "material-icons custom"> group_add </i> group_add
<i class = "material-icons custom"> location_city </i> location_city
<i class = "material-icons custom"> mood </i> umore
<i class = "material-icons custom"> mood_bad </i> mood_bad
<i class = "material-icons custom"> notifiche </i> notifiche
<i class = "material-icons custom"> notification_active </i> notifiche_attivo
<i class = "material-icons custom"> notification_none </i> notifiche_none
<i class = "material-icons custom"> notification_off </i> notifiche_off
<i class = "material-icons custom"> notification_paused </i> notifiche_paused
<i class = "material-icons custom"> pagine </i> pagine
<i class = "material-icons custom"> party_mode </i> party_mode
<i class = "material-icons custom"> persone </i> persone
<i class = "material-icons custom"> people_outline </i> people_outline
<i class = "material-icons custom"> persona </i> persona
<i class = "material-icons custom"> person_add </i> person_add
<i class = "material-icons custom"> person_outline </i> person_outline
<i class = "material-icons custom"> plus_one </i> più uno
<i class = "material-icons custom"> sondaggio </i> sondaggio
<i class = "material-icons custom"> public </i> pubblico
<i class = "material-icons custom"> scuola </i> scuola
<i class = "material-icons custom"> condividi </i> Condividere
<i class = "material-icons custom"> whatshot </i> cosa c'è di nuovo