Materiał - ikony edytora

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

Stosowanie	Wynik
<i class = "material-icons custom"> attach_file </i>	załącz plik
<i class = "material-icons custom"> attach_money </i>	attach_money
<i class = "material-icons custom"> border_all </i>	border_all
<i class = "material-icons custom"> border_bottom </i>	border_bottom
<i class = "material-icons custom"> border_clear </i>	border_clear
<i class = "material-icons custom"> border_color </i>	kolor ramki
<i class = "material-icons custom"> border_horizontal </i>	border_horizontal
<i class = "material-icons custom"> border_inner </i>	border_inner
<i class = "material-icons custom"> border_left </i>	border_left
<i class = "material-icons custom"> border_outer </i>	border_outer
<i class = "material-icons custom"> border_right </i>	border_right
<i class = "material-icons custom"> border_style </i>	border_style
<i class = "material-icons custom"> border_top </i>	border_top
<i class = "material-icons custom"> border_vertical </i>	border_vertical
<i class = "material-icons custom"> format_align_center </i>	format_align_center
<i class = "material-icons custom"> format_align_justify </i>	format_align_justify
<i class = "material-icons custom"> format_align_left </i>	format_align_left
<i class = "material-icons custom"> format_align_right </i>	format_align_right
<i class = "material-icons custom"> format_bold </i>	format_bold
<i class = "material-icons custom"> format_clear </i>	format_clear
<i class = "material-icons custom"> format_color_fill </i>	format_color_fill
<i class = "material-icons custom"> format_color_reset </i>	format_color_reset
<i class = "material-icons custom"> format_color_text </i>	format_color_text
<i class = "material-icons custom"> format_indent_decrease </i>	format_indent_decrease
<i class = "material-icons custom"> format_indent_increase </i>	format_indent_increase
<i class = "material-icons custom"> format_italic </i>	format_italic
<i class = "material-icons custom"> format_line_spacing </i>	format_line_spacing
<i class = "material-icons custom"> format_list_bulleted </i>	format_list_bulleted
<i class = "material-icons custom"> format_list_numbered </i>	format_list_numbered
<i class = "material-icons custom"> format_paint </i>	format_paint
<i class = "material-icons custom"> format_quote </i>	format_quote
<i class = "material-icons custom"> format_size </i>	format_size
<i class = "material-icons custom"> format_strikethrough </i>	format_strikethrough
<i class = "material-icons custom"> format_textdirection_l_to_r </i>	format_textdirection_l_to_r
<i class = "material-icons custom"> format_textdirection_r_to_l </i>	format_textdirection_r_to_l
<i class = "material-icons custom"> format_underline </i>	format_underline
<i class = "material-icons custom"> funkcje </i>	Funkcje
<i class = "material-icons custom"> insert_chart </i>	insert_chart
<i class = "material-icons custom"> insert_comment </i>	insert_comment
<i class = "material-icons custom"> insert_drive_file </i>	insert_drive_file
<i class = "material-icons custom"> insert_emoticon </i>	insert_emoticon
<i class = "material-icons custom"> insert_invitation </i>	insert_invitation
<i class = "material-icons custom"> insert_link </i>	insert_link
<i class = "material-icons custom"> insert_photo </i>	wstaw_zdjęcie
<i class = "material-icons custom"> merge_type </i>	merge_type
<i class = "material-icons custom"> mode_comment </i>	mode_comment
<i class = "material-icons custom"> mode_edit </i>	mode_edit
<i class = "material-icons custom"> money_off </i>	pieniądze z
<i class = "material-icons custom"> publikuj </i>	publikować
<i class = "material-icons custom"> spacja_bar </i>	spacja_bar
<i class = "material-icons custom"> strikethrough_s </i>	strikethrough_s
<i class = "material-icons custom"> vertical_align_bottom </i>	vertical_align_bottom
<i class = "material-icons custom"> vertical_align_center </i>	vertical_align_center
<i class = "material-icons custom"> vertical_align_top </i>	vertical_align_top
<i class = "material-icons custom"> wrap_text </i>	wrap_text