材质图标 


材质图标


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

加载字体(库)

要加载材料图标库,请将以下行复制并粘贴到网页的<head>部分中。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

使用图标

Google的Material Icons提供了很长的图标列表。选择其中之一,然后将图标类的名称添加到<body>标记内的任何HTML元素中。在以下示例中,我们使用了属于操作类别的名为accessibility的图标。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   
    
   
      <i class="material-icons">accessibility</i>
   
    

它将产生以下输出-

定义大小

您可以通过在CSS中定义图标的大小并将其与类名一起使用来增加或减小图标的大小,如下所示。在下面的示例中,我们将大小声明为6 em。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        
      <style>
         i.mysize {font-size: 6em;}
      </style>
        
   
    
   
      <i class="material-icons mysize">accessibility</i>
   
    

它将产生以下输出-

定义颜色

您可以使用CSS定义图标的颜色。以下示例显示了如何更改名为accessibility的图标的颜色。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        
      <style>
         i.custom {font-size: 6em; color: green;}
      </style>
        
   
    
   
      <i class="material-icons custom">accessibility</i>
   
    

它将产生以下输出-

分类列表

Google的Material Icons字体在以下类别中提供了519个图标-

  • 动作图标
  • 警报图标
  • AV图标
  • 通信图标
  • 内容图标
  • 设备图标
  • 编辑器图标
  • 文件图标
  • 硬件图标
  • 图像图标
  • 地图图标
  • 导航图标
  • 通知图标
  • 社会图标
  • 切换图标

要使用这些图标中的任何一个,必须用所需图标的类名替换本章给出的程序中的类名。在本单元(材料图标)的后续章节中,我们已按类别说明了各种材料图标的用法和各自的输出。

0



error: 内容受到保护 !!