上一节:
下一节:

  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 > 标签以获得相应的输出 -
    用法 结果
    <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
上一节:
下一节: