材质-图像图标 


材质-图像图标


本章介绍了Google(材料)图像图标的用法。假设custom是我们定义大小和颜色的CSS类名称,如下面的示例所示。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
        
   
    
   
      <i class="material-icons custom">accessibility</i>
   
    

下表包含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
0



error: 内容受到保护 !!