素材 - 图片图标

本章解释了 Google 的 (Material) 图片图标的使用方法。假设 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) 图片图标的使用方法和结果。将上面程序的 < body > 标记替换为表中给出的代码，即可获得相应的输出 -

用法	结果
<i class="material-icons custom">add_to_photos</i>
<i class="material-icons custom">adjust</i>
<i class="material-icons custom">assistant</i>
<i class="material-icons custom">assistant</i>
<i class="material-icons custom">audiotrack</i>
<i class="material-icons custom">blur_circular</i>
<i class="material-icons custom">blur_linear</i>
<i class="material-icons custom">blur_off</i>
<i class="material-icons custom">blur_on</i>
<i class="material-icons custom">brightness_1</i>
<i class="material-icons custom">brightness_2</i>
<i class="material-icons custom">brightness_3</i>
<i class="material-icons custom">brightness_4</i>
<i class="material-icons custom">brightness_5</i>
<i class="material-icons custom">brightness_6</i>
<i class="material-icons custom">brightness_7</i>
<i class="material-icons custom">broken_image</i>
<i class="material-icons custom">brush</i>
<i class="material-icons custom">camera</i>
<i class="material-icons custom">camera_alt</i>
<i class="material-icons custom">camera_front</i>
<i class="material-icons custom">camera_rear</i>
<i class="material-icons custom">camera_roll</i>
<i class="material-icons custom">center_focus_strong</i>
<i class="material-icons custom">center_focus_weak</i>
<i class="material-icons custom">collections</i>
<i class="material-icons custom">collections_bookmark</i>
<i class="material-icons custom">color_lens</i>
<i class="material-icons custom">colorize</i>
<i class="material-icons custom">compare</i>
<i class="material-icons custom">control_point</i>
<i class="material-icons custom">control_point_duplicate</i>
<i class="material-icons custom">crop</i>
<i class="material-icons custom">crop_16_9</i>
<i class="material-icons custom">crop_3_2</i>
<i class="material-icons custom">crop_5_4</i>
<i class="material-icons custom">crop_7_5</i>
<i class="material-icons custom">crop_din</i>
<i class="material-icons custom">crop_free</i>
<i class="material-icons custom">crop_landscape</i>
<i class="material-icons custom">crop_original</i>
<i class="material-icons custom">crop_portrait</i>
<i class="material-icons custom">crop_square</i>
<i class="material-icons custom">dehaze</i>
<i class="material-icons custom">details</i>
<i class="material-icons custom">edit</i>
<i class="material-icons custom">exposure</i>
<i class="material-icons custom">exposure_neg_1</i>
<i class="material-icons custom">exposure_plus_1</i>
<i class="material-icons custom">exposure_plus_2</i>
<i class="material-icons custom">exposure_zero</i>
<i class="material-icons custom">filter</i>
<i class="material-icons custom">filter_1</i>
<i class="material-icons custom">filter_2</i>
<i class="material-icons custom">filter_3</i>
<i class="material-icons custom">filter_4</i>
<i class="material-icons custom">filter_5</i>
<i class="material-icons custom">filter_6</i>
<i class="material-icons custom">filter_7</i>
<i class="material-icons custom">filter_8</i>
<i class="material-icons custom">filter_9</i>
<i class="material-icons custom">filter_9_plus</i>
<i class="material-icons custom">filter_b_and_w</i>
<i class="material-icons custom">filter_center_focus</i>
<i class="material-icons custom">filter_drama</i>
<i class="material-icons custom">filter_frames</i>
<i class="material-icons custom">filter_hdr</i>
<i class="material-icons custom">filter_none</i>
<i class="material-icons custom">filter_tilt_shift</i>
<i class="material-icons custom">filter_vintage</i>
<i class="material-icons custom">flare</i>
<i class="material-icons custom">flash_auto</i>
<i class="material-icons custom">flash_off</i>
<i class="material-icons custom">flash_on</i>
<i class="material-icons custom">flip</i>
<i class="material-icons custom">gradient</i>
<i class="material-icons custom">grain</i>
<i class="material-icons custom">grid_off</i>
<i class="material-icons custom">grid_on</i>
<i class="material-icons custom">hdr_off</i>
<i class="material-icons custom">hdr_on</i>
<i class="material-icons custom">hdr_strong</i>
<i class="material-icons custom">hdr_weak</i>
<i class="material-icons custom">healing</i>
<i class="material-icons custom">image</i>
<i class="material-icons custom">image_aspect_ratio</i>
<i class="material-icons custom">iso</i>
<i class="material-icons custom">landscape</i>
<i class="material-icons custom">leak_add</i>
<i class="material-icons custom">leak_remove</i>
<i class="material-icons custom">lens</i>
<i class="material-icons custom">looks</i>
<i class="material-icons custom">looks_3</i>
<i class="material-icons custom">looks_4</i>
<i class="material-icons custom">looks_5</i>
<i class="material-icons custom">looks_6</i>
<i class="material-icons custom">looks_one</i>
<i class="material-icons custom">looks_two</i>
<i class="material-icons custom">loupe</i>
<i class="material-icons custom">monochrome_photos</i>
<i class="material-icons custom">movie_creation</i>
<i class="material-icons custom">music_note</i>
<i class="material-icons custom">nature</i>
<i class="material-icons custom">nature_people</i>
<i class="material-icons custom">wb_sunny</i>
<i class="material-icons custom">navigate_next</i>
<i class="material-icons custom">navigate_before</i>
<i class="material-icons custom">palette</i>
<i class="material-icons custom">panorama</i>
<i class="material-icons custom">panorama_fish_eye</i>
<i class="material-icons custom">panorama_horizontal</i>
<i class="material-icons custom">panorama_vertical</i>
<i class="material-icons custom">panorama_wide_angle</i>
<i class="material-icons custom">photo</i>
<i class="material-icons custom">photo_album</i>
<i class="material-icons custom">photo_camera</i>
<i class="material-icons custom">photo_library</i>
<i class="material-icons custom">photo_size_select_actual</i>
<i class="material-icons custom">photo_size_select_large</i>
<i class="material-icons custom">photo_size_select_small</i>
<i class="material-icons custom">picture_as_pdf</i>
<i class="material-icons custom">portrait</i>
<i class="material-icons custom">remove_red_eye</i>
<i class="material-icons custom">rotate_90_degrees_ccw</i>
<i class="material-icons custom">rotate_left</i>
<i class="material-icons custom">rotate_right</i>
<i class="material-icons custom">slideshow</i>
<i class="material-icons custom">straighten</i>
<i class="material-icons custom">style</i>
<i class="material-icons custom">switch_camera</i>
<i class="material-icons custom">switch_video</i>
<i class="material-icons custom">tag_faces</i>
<i class="material-icons custom">texture</i>
<i class="material-icons custom">timelapse</i>
<i class="material-icons custom">timer</i>
<i class="material-icons custom">timer_10</i>
<i class="material-icons custom">timer_3</i>
<i class="material-icons custom">timer_off</i>
<i class="material-icons custom">tonality</i>
<i class="material-icons custom">transform</i>
<i class="material-icons custom">tune</i>
<i class="material-icons custom">view_comfy</i>
<i class="material-icons custom">view_compact</i>
<i class="material-icons custom">vignette</i>
<i class="material-icons custom">wb_auto</i>
<i class="material-icons custom">wb_cloudy</i>
<i class="material-icons custom">wb_incandescent</i>
<i class="material-icons custom">wb_iridescent</i>

打印页面