上一节:
下一节:

  Web Icon - Material - 图片图标

  • 简述

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