Materiał - ikony treści

W tym rozdziale wyjaśniono użycie ikon Google (Material) Content. 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 Treści (Materiał) Google. Zastąp tag <body> powyższego programu kodem podanym w tabeli, aby uzyskać odpowiednie wyniki -

Stosowanie Wynik
<i class = "material-icons custom"> dodaj </i> Dodaj
<i class = "material-icons custom"> add_box </i> add_box
<i class = "material-icons custom"> add_circle </i> add_circle
<i class = "material-icons custom"> add_circle_outline </i> add_circle_outline
<i class = "material-icons custom"> archiwum </i> archiwum
<i class = "material-icons custom"> Backspace </i> Backspace
<i class = "material-icons custom"> blok </i> blok
<i class = "material-icons custom"> wyczyść </i> jasny
<i class = "material-icons custom"> content_copy </i> content_copy
<i class = "material-icons custom"> content_cut </i> content_cut
<i class = "material-icons custom"> content_paste </i> content_paste
<i class = "material-icons custom"> utwórz </i> Stwórz
<i class = "material-icons custom"> szkice </i> warcaby
<i class = "material-icons custom"> filter_list </i> filter_list
<i class = "material-icons custom"> flaga </i> flaga
<i class = "material-icons custom"> font_download </i> font_download
<i class = "material-icons custom"> do przodu </i> Naprzód
<i class = "material-icons custom"> gest </i> gest
<i class = "material-icons custom"> skrzynka odbiorcza </i> w pudełku
<i class = "material-icons custom"> link </i> połączyć
<i class = "material-icons custom"> poczta </i> Poczta
<i class = "material-icons custom"> markunread </i> Zaznacz jako nieprzeczytane
<i class = "material-icons custom"> ponów </i> przerobić
<i class = "material-icons custom"> usuń </i> usunąć
<i class = "material-icons custom"> remove_circle </i> remove_circle
<i class = "material-icons custom"> remove_circle_outline </i> remove_circle_outline
<i class = "material-icons custom"> odpowiedz </i> Odpowiadać
<i class = "material-icons custom"> Reply_all </i> Odpowiedz wszystkim
<i class = "material-icons custom"> raport </i> raport
<i class = "material-icons custom"> zapisz </i> zapisać
<i class = "material-icons custom"> select_all </i> Zaznacz wszystko
<i class = "material-icons custom"> wyślij </i> wysłać
<i class = "material-icons custom"> sort </i> sortować
<i class = "material-icons custom"> text_format </i> text_format
<i class = "material-icons custom"> stay_current_portrait </i> stay_current_portrait
<i class = "material-icons custom"> cofnij </i> Cofnij