网页图标 - 简介

图标是用于表示网页上特定操作或功能的符号。图标不仅用于文档，也用于应用程序，它们可以是可选择的，也可以是非可选择的。例如，我们在应用程序按钮上看到的图像都是图标，这些按钮是可以选择的。同样，当我们使用图标作为公司徽标时，它通常是非可选择的。

在 Windows 环境中，如果我们静音系统音量，它将通过图标表示，如下所示。

使用网页图标，我们可以表示加载页面、禁用选项、链接、重定向等。这些图标可以翻转、旋转、调整大小、添加边框、反转和着色。

图标字体

图标字体包含符号和字形。加载所需的字体后，可以使用该字体提供的任何图标，方法是使用图标的类名。我们还可以使用 CSS 属性为图标应用不同的颜色并调整其大小。有几个图标库（字体）提供图标。本教程重点介绍三种主要字体：

• Font Awesome
• Bootstrap Glyphicons
• Google 的 Material Icons

Font Awesome

该字体提供 519 个免费的可缩放矢量图标。该库完全免费，个人和商业用途均可。这些图标可以轻松自定义。最初，它们是为 Bootstrap 开发的。

Bootstrap Glyphicons

这是一个单色图标库，提供光栅图像格式、矢量图像格式和字体格式。它以字体格式提供超过 250 个字形。您可以在 Web 项目中使用这些字体。这些图标不是免费的，但是您可以在基于 Bootstrap 的项目中使用它们，而无需购买。

Google 的 Material Icons

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