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