Materiał - ikony społecznościowe

W tym rozdziale wyjaśniono użycie ikon społecznościowych (Material) Google. Zakładać, żecustom to nazwa klasy CSS, w której zdefiniowaliśmy rozmiar i kolor, jak pokazano w przykładzie podanym poniżej.

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

Poniższa tabela zawiera wykorzystanie i wyniki ikon społecznościowych Google (Material). Zastąp tag <body> powyższego programu kodem podanym w tabeli, aby uzyskać odpowiednie wyniki -

Stosowanie	Wynik
<i class = "material-icons custom"> ciasto </i>	ciasto
<i class = "material-icons custom"> domena </i>	domena
<i class = "material-icons custom"> grupa </i>	Grupa
<i class = "material-icons custom"> group_add </i>	group_add
<i class = "material-icons custom"> location_city </i>	miasto_lokalizacji
<i class = "material-icons custom"> nastrój </i>	nastrój
<i class = "material-icons custom"> mood_bad </i>	zły nastrój
<i class = "material-icons custom"> powiadomienia </i>	powiadomienia
<i class = "material-icons custom"> notifications_active </i>	powiadomienia_aktywne
<i class = "material-icons custom"> notifications_none </i>	notyfikacje_brak
<i class = "material-icons custom"> notifications_off </i>	powiadomienia_wył
<i class = "material-icons custom"> notifications_paused </i>	notification_paused
<i class = "material-icons custom"> strony </i>	stron
<i class = "material-icons custom"> party_mode </i>	tryb imprezowy
<i class = "material-icons custom"> ludzie </i>	ludzie
<i class = "material-icons custom"> people_outline </i>	people_outline
<i class = "material-icons custom"> osoba </i>	osoba
<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>	plus jeden
<i class = "material-icons custom"> ankieta </i>	głosowanie
<i class = "material-icons custom"> public </i>	publiczny
<i class = "material-icons custom"> szkoła </i>	szkoła
<i class = "material-icons custom"> udostępnij </i>	dzielić
<i class = "material-icons custom"> whatshot </i>	co jest na topie