재질-편집기 아이콘

이 장에서는 Google의 (Material) Editor 아이콘 사용에 대해 설명합니다. 그것을 가정custom 아래에 주어진 예와 같이 크기와 색상을 정의한 CSS 클래스 이름입니다.

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

다음 표에는 Google의 (Material) Editor 아이콘의 사용법과 결과가 포함되어 있습니다. 위 프로그램의 <body> 태그를 표에 주어진 코드로 대체하여 각 출력을 얻습니다.

용법 결과
<i class = "material-icons custom"> 첨부 파일 </ i> 파일을 첨부
<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> border_color
<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"> 테두리 _ 스타일 </ 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"> 형식 _ 지우기 </ i> format_clear
<i class = "material-icons custom"> format_color_fill </ i> format_color_fill
<i class = "material-icons custom"> 형식 _ 색상 _ 재설정 </ i> format_color_reset
<i class = "material-icons custom"> 형식 _ 색상 _ 텍스트 </ 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"> 형식 _ 선 _ 간격 </ i> format_line_spacing
<i class = "material-icons custom"> format_list_bulleted </ i> format_list_bulleted
<i class = "material-icons custom"> 형식 _ 목록 _ 번호 </ 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"> 형식 _ 크기 </ i> 형식 _ 크기
<i class = "material-icons custom"> 형식 _ 취소 선 </ 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"> 기능 </ i> 기능
<i class = "material-icons custom"> 삽입 _ 차트 </ i> insert_chart
<i class = "material-icons custom"> 댓글 삽입 </ i> 코멘트 삽입
<i class = "material-icons custom"> insert_drive_file </ i> insert_drive_file
<i class = "material-icons custom"> 이모티콘 삽입 </ i> 삽입 _ 이모티콘
<i class = "material-icons custom"> 초대 _ 삽입 </ i> insert_invitation
<i class = "material-icons custom"> 삽입 _ 링크 </ i> 삽입 _ 링크
<i class = "material-icons custom"> 사진 삽입 </ i> 사진 삽입
<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> money_off
<i class = "material-icons custom"> 게시 </ i> 출판하다
<i class = "material-icons custom"> 스페이스 바 </ i> 스페이스 바
<i class = "material-icons custom"> 취소 선 </ i> 취소 선 _ 초
<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