上一节:
下一节:

  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">business</i> business
    <i class="material-icons custom">call</i> call
    <i class="material-icons custom">call_made</i> call_made
    <i class="material-icons custom">call_merge</i> call_merge
    <i class="material-icons custom">call_missed</i> call_missed
    <i class="material-icons custom">call_received</i> call_received
    <i class="material-icons custom">call_split</i> call_split
    <i class="material-icons custom">chat</i> chat
    <i class="material-icons custom">chat_bubble</i> chat_bubble
    <i class="material-icons custom">chat_bubble_outline</i> chat_bubble_outline
    <i class="material-icons custom">clear_all</i> clear_all
    <i class="material-icons custom">comment</i> comment
    <i class="material-icons custom">contact_phone</i> contact_phone
    <i class="material-icons custom">contacts</i> contacts
    <i class="material-icons custom">dialer_sip</i> dialer_sip
    <i class="material-icons custom">dialpad</i> dialpad
    <i class="material-icons custom">forum</i> forum
    <i class="material-icons custom">import_export</i> import_export
    <i class="material-icons custom">invert_colors_off</i> invert_colors_off
    <i class="material-icons custom">live_help</i> live_help
    <i class="material-icons custom">location_off</i> location_off
    <i class="material-icons custom">location_on</i> location_on
    <i class="material-icons custom">message</i> message
    <i class="material-icons custom">no_sim</i> no_sim
    <i class="material-icons custom">phone</i> phone
    <i class="material-icons custom">phonelink_erase</i> phonelink_erase
    <i class="material-icons custom">phonelink_lock</i> phonelink_lock
    <i class="material-icons custom">phonelink_ring</i> phonelink_ring
    <i class="material-icons custom">phonelink_setup</i> phonelink_setup
    <i class="material-icons custom">portable_wifi_off</i> portable_wifi_off
    <i class="material-icons custom">present_to_all</i> present_to_all
    <i class="material-icons custom">ring_volume</i> ring_volume
    <i class="material-icons custom">speaker_phone</i> speaker_phone
    <i class="material-icons custom">stay_current_landscape</i> stay_current_landscape
    <i class="material-icons custom">stay_current_portrait</i> stay_current_portrait
    <i class="material-icons custom">stay_primary_landscape</i> stay_primary_landscape
    <i class="material-icons custom">stay_primary_portrait</i> stay_primary_portrait
    <i class="material-icons custom">swap_calls</i> swap_calls
    <i class="material-icons custom">textsms</i> textsms
    <i class="material-icons custom">voicemail</i> voicemail
    <i class="material-icons custom">vpn_key</i> vpn_key
    <i class="material-icons custom">email</i> email
    <i class="material-icons custom">call_end</i> call_end
上一节:
下一节: