Material 图标

Google 提供了一套 750 个根据“Material Design 指南”设计的图标，这些图标被称为Material Design 图标。这些图标简洁易用，并且支持所有现代网页浏览器。由于这些图标是基于矢量的，因此它们也是可缩放的。要使用这些图标，我们必须加载字体（库）material-icons。

加载字体（库）

要加载 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 个图标 -

操作图标
警告图标
音视频图标
通信图标
内容图标
设备图标
编辑器图标
文件图标
硬件图标
图片图标
地图图标
导航图标
通知图标
社交图标
切换图标

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

打印页面