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">apps</i> apps
    <i class="material-icons custom">arrow_back</i> arrow_back
    <i class="material-icons custom">arrow_drop_down</i> arrow_drop_down
    <i class="material-icons custom">arrow_drop_down_circle</i> arrow_drop_down_circle
    <i class="material-icons custom">arrow_drop_up</i> arrow_drop_up
    <i class="material-icons custom">arrow_forward</i> arrow_forward
    <i class="material-icons custom">cancel</i> cancel
    <i class="material-icons custom">check</i> check
    <i class="material-icons custom">chevron_left</i> chevron_left
    <i class="material-icons custom">chevron_right</i> chevron_right
    <i class="material-icons custom">close</i> close
    <i class="material-icons custom">expand_less</i> expand_less
    <i class="material-icons custom">expand_more</i> expand_more
    <i class="material-icons custom">fullscreen</i> fullscreen
    <i class="material-icons custom">fullscreen_exit</i> fullscreen_exit
    <i class="material-icons custom">menu</i> menu
    <i class="material-icons custom">more_horiz</i> more_horiz
    <i class="material-icons custom">more_vert</i> more_vert
    <i class="material-icons custom">refresh</i> refresh