材质-导航图标 


材质-导航图标


本章介绍了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”>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
0



error: 内容受到保护 !!