Material - Editor - Symbole

In diesem Kapitel wird die Verwendung der Google-Symbole (Material) Editor erläutert. Annehmen, dasscustom ist der CSS-Klassenname, in dem wir die Größe und Farbe definiert haben, wie im folgenden Beispiel gezeigt.

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

Die folgende Tabelle enthält die Verwendung und die Ergebnisse der Google-Symbole (Material) Editor. Ersetzen Sie das <body> -Tag des obigen Programms durch den in der Tabelle angegebenen Code, um die entsprechenden Ausgaben zu erhalten -

Verwendung	Ergebnis
<i class = "material-icons custom"> attach_file </ i>	Datei anhängen
<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>	Randfarbe
<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"> Funktionen </ i>	Funktionen
<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>	insert_photo
<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>	Geld aus
<i class = "material-icons custom"> veröffentlichen </ i>	veröffentlichen
<i class = "material-icons custom"> Leertaste </ i>	Leertaste
<i class = "material-icons custom"> durchgestrichen_s </ i>	durchgestrichen
<i class = "material-icons custom"> vertical_align_bottom </ i>	vertikale_Ausrichtung_Boden
<i class = "material-icons custom"> vertikales_ausrichtungszentrum </ i>	vertikale_Ausrichtung_Zentrum
<i class = "material-icons custom"> vertical_align_top </ i>	vertikale_Ausrichtung_Top
<i class = "material-icons custom"> wrap_text </ i>	Zeilenumbruch