材质图标

Google 提供了一组根据“材料设计指南”设计的 750 个图标，这些图标被称为材料设计图标。这些图标很简单，并且支持所有现代网络浏览器。由于这些图标是基于矢量的，因此它们也是可缩放的。要使用这些图标，我们必须加载字体（库）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 个图标 -

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

要使用这些图标中的任何一个，您必须将本章中给出的程序中的类名称替换为所需图标的类名称。在本单元（材质图标）的后续章节中，我们按类别解释了各种材质图标的用法和各自的输出。