材质-编辑器图标

本章介绍 Google 的（材质）编辑器图标的用法。假设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 的（材质）编辑器图标的用法和结果。将上述程序的 <body> 标记替换为表中给出的代码以获得相应的输出 -

用法 结果
<i class="material-icons custom">attach_file</i> 附加文件
<i class="material-icons custom">attach_money</i> 附加金钱
<i class="material-icons custom">border_all</i> 全部边框
<i class="material-icons custom">border_bottom</i> 边框底部
<i class="material-icons custom">border_clear</i> 边框清除
<i class="material-icons custom">border_color</i> 边框颜色
<i class="material-icons custom">border_horizo​​ntal</i> 边框水平
<i class="material-icons custom">border_inner</i> 内边框
<i class="material-icons custom">border_left</i> 左边框
<i class="material-icons custom">border_outer</i> 外边框
<i class="material-icons custom">border_right</i> 右边框
<i class="material-icons custom">border_style</i> 边框样式
<i class="material-icons custom">border_top</i> 顶部边框
<i class="material-icons custom">border_vertical</i> 垂直边框
<i class="material-icons custom">format_align_center</i> 格式对齐中心
<i class="material-icons custom">format_align_justify</i> 格式对齐对齐
<i class="material-icons custom">format_align_left</i> 左对齐格式
<i class="material-icons custom">format_align_right</i> 格式右对齐
<i class="material-icons custom">format_bold</i> 粗体格式
<i class="material-icons custom">format_clear</i> 格式清除
<i class="material-icons custom">format_color_fill</i> 格式颜色填充
<i class="material-icons custom">format_color_reset</i> 格式颜色重置
<i class="material-icons custom">format_color_text</i> 格式颜色文本
<i class="material-icons custom">format_indent_decrease</i> 格式缩进减少
<i class="material-icons custom">format_indent_increase</i> 格式缩进增加
<i class="material-icons custom">format_italic</i> 斜体格式
<i class="material-icons custom">format_line_spacing</i> 格式行间距
<i class="material-icons custom">format_list_bulleted</i> 格式列表项目符号
<i class="material-icons custom">format_list_numbered</i> 格式列表编号
<i class="material-icons custom">format_paint</i> 格式绘制
<i class="material-icons custom">format_quote</i> 格式引用
<i class="material-icons custom">format_size</i> 格式大小
<i class="material-icons custom">format_strikethrough</i> 格式删除线
<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> 格式_下划线
<i class="material-icons custom">功能</i> 功能
<i class="material-icons custom">insert_chart</i> 插入图表
<i class="material-icons custom">insert_comment</i> 插入评论
<i class="material-icons custom">insert_drive_file</i> 插入驱动器文件
<i class="material-icons custom">insert_emoticon</i> 插入表情符号
<i class="material-icons custom">insert_invitation</i> 插入_邀请
<i class="material-icons custom">insert_link</i> 插入链接
<i class="material-icons custom">insert_photo</i> 插入照片
<i class="material-icons custom">merge_type</i> 合并类型
<i class="material-icons custom">mode_comment</i> 模式_评论
<i class="material-icons custom">mode_edit</i> 模式编辑
<i class="material-icons custom">money_off</i> 省钱
<i class="material-icons custom">发布</i> 发布
<i class="material-icons custom">space_bar</i> 空格键
<i class="material-icons custom">strikethrough_s</i> 删除线_s
<i class="material-icons custom">vertical_align_bottom</i> 垂直对齐底部
<i class="material-icons custom">vertical_align_center</i> 垂直对齐中心
<i class="material-icons custom">vertical_align_top</i> 垂直对齐顶部
<i class="material-icons custom">wrap_text</i> 换行文本