Web Icon - Material 图标

  • 简述

    Google 提供了一组根据“材料设计指南”设计的 750 个图标,这些图标被称为Material Design图标。这些图标很简单,它们支持所有现代网络浏览器。由于这些图标是基于矢量的,因此它们也可以缩放。要使用这些图标,我们必须加载字体(库)material-icons
  • 加载字体(库)

    要加载材料图标库,请将以下行复制并粘贴到网页的 <head> 部分。
    
    <head>
       <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
    </head>
    
  • 使用图标

    Google 的 Material Icons 提供了一长串图标。选择其中任何一个并将图标类的名称添加到 <body> 标记内的任何 HTML 元素。在下面的示例中,我们使用了属于操作类别的名为accessibility的图标。
    
    <!DOCTYPE html>
    <html>
       <head>
          <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
       </head>
         
       <body>
          <i class = "material-icons">accessibility</i>
       </body>
         
    </html>
    

    定义尺寸

    您可以通过在 CSS 中定义图标的大小并将其与类名称一起使用来增加或减小图标的大小,如下所示。在下面的示例中,我们将大小声明为 6 em。
    
    <!DOCTYPE html>
    <html>
       <head>
          <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
              
          <style>
             i.mysize {font-size: 6em;}
          </style>
              
       </head>
         
       <body>
          <i class = "material-icons mysize">accessibility</i>
       </body>
         
    </html>
    

    定义颜色

    您可以使用 CSS 来定义图标的颜色。以下示例显示了如何更改名为accessibility的图标的颜色。
    
    <!DOCTYPE html>
    <html>
       <head>
          <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
              
          <style>
             i.custom {font-size: 6em; color: green;}
          </style>
              
       </head>
         
       <body>
          <i class = "material-icons custom">accessibility</i>
       </body>
         
    </html>
    
  • 类别列表

    Google 的 Material Icons 字体提供以下类别的 519 个图标 -
    • 动作图标
    • 警报图标
    • 影音图标
    • 通信图标
    • 内容图标
    • 设备图标
    • 编辑器图标
    • 文件图标
    • 硬件图标
    • 图像图标
    • 地图图标
    • 导航图标
    • 通知图标
    • 社会偶像
    • 切换图标
    要使用这些图标中的任何一个,您必须将本章给出的程序中的类名替换为所需图标的类名。在本单元的后续章节(材质图标)中,我们按类别解释了各种材质图标的用法和各自的输出。