材质-通知图标 


材质-通知图标


本章介绍了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”>adb</i> adb
<i class=”material-icons custom”>airline_seat_flat</i> airline_seat_flat
<i class=”material-icons custom”>airline_seat_flat_angled</i> airline_seat_flat_angled
<i class=”material-icons custom”>airline_seat_individual_suite</i> airline_seat_individual_suite
<i class=”material-icons custom”>airline_seat_legroom_reduced</i> airline_seat_legroom_reduced
<i class=”material-icons custom”>airline_seat_recline_extra</i> airline_seat_recline_extra
<i class=”material-icons custom”>airline_seat_recline_normal</i> airline_seat_recline_normal
<i class=”material-icons custom”>bluetooth_audio</i> bluetooth_audio
<i class=”material-icons custom”>confirmation_number</i> confirmation_number
<i class=”material-icons custom”>disc_full</i> disc_full
<i class=”material-icons custom”>do_not_disturb</i> do_not_disturb
<i class=”material-icons custom”>do_not_disturb_alt</i> do_not_disturb_alt
<i class=”material-icons custom”>drive_eta</i> drive_eta
<i class=”material-icons custom”>event_available</i> event_available
<i class=”material-icons custom”>event_busy</i> event_busy
<i class=”material-icons custom”>event_note</i> event_note
<i class=”material-icons custom”>folder_special</i> folder_special
<i class=”material-icons custom”>live_tv</i> live_tv
<i class=”material-icons custom”>mms</i> mms
<i class=”material-icons custom”>more</i> more
<i class=”material-icons custom”>network_locked</i> network_locked
<i class=”material-icons custom”>ondemand_video</i> ondemand_video
<i class=”material-icons custom”>personal_video</i> personal_video
<i class=”material-icons custom”>phone_bluetooth_speaker</i> phone_bluetooth_speaker
<i class=”material-icons custom”>phone_forwarded</i> phone_forwarded
<i class=”material-icons custom”>phone_in_talk</i> phone_in_talk
<i class=”material-icons custom”>phone_locked</i> phone_locked
<i class=”material-icons custom”>phone_missed</i> phone_missed
<i class=”material-icons custom”>phone_paused</i> phone_paused
<i class=”material-icons custom”>power</i> power
<i class=”material-icons custom”>sd_card</i> sd_card
<i class=”material-icons custom”>sim_card_alert</i> sim_card_alert
<i class=”material-icons custom”>sms</i> sms
<i class=”material-icons custom”>sms_failed</i> sms_failed
<i class=”material-icons custom”>sync</i> sync
<i class=”material-icons custom”>sync_disabled</i> sync_disabled
<i class=”material-icons custom”>sync_problem</i> sync_problem
<i class=”material-icons custom”>system_update</i> system_update
<i class=”material-icons custom”>tap_and_play</i> tap_and_play
<i class=”material-icons custom”>time_to_leave</i> time_to_leave
<i class=”material-icons custom”>vibration</i> vibration
<i class=”material-icons custom”>voice_chat</i> voice_chat
<i class=”material-icons custom”>vpn_lock</i> vpn_lock
<i class=”material-icons custom”>wc</i> wc
<i class=”material-icons custom”>wifi</i> wifi
0



error: 内容受到保护 !!