下一节:

  Web Icons(图标) - 教程

  • 简述

    我们有许多可用的图标字体（库），可以像我们使用普通文本字体一样在 HTML 页面上使用。Font Awesome、Bootstrap Glyphicons 和 Google 的 Material Icons 是 Web 开发人员经常使用的著名图标字体。本教程解释了如何在实践中使用这些图标字体。
    本教程适用于希望在其网页上使用图标的 HTML 开发人员。
    在继续学习本教程之前，您应该对 HTML 和 CSS 有很好的理解。

  • 简述

    图标是用于表示网页上的特定操作或功能的符号。图标用于文档和应用程序中，它们可以是可选择的或不可选择的。例如，我们在应用程序的按钮上看到的图像都是图标，并且这些按钮是可选择的。同样，当我们使用图标作为公司标志时，它通常是不可选择的。
    在 Windows 环境下，如果我们将系统音量静音，它会借助一个图标来表示，如下所示。
    沉默的
    使用网络图标，我们可以表示加载页面、禁用选项、链接、重定向等。这些图标可以翻转、旋转、调整大小、加边框、反转和着色。

  • 图标字体

    图标字体包含符号和字形。加载所需字体后，您可以使用该字体提供的任何图标，并使用图标的类名。我们还可以为图标应用不同的颜色并使用 CSS 属性调整它们的大小。有几个提供图标的图标库（字体）。本教程重点介绍三种主要字体，即 -
    • Font Awesome
    • Bootstrap Glyphicons
    • Google's Material Icons

  • Font Awesome

    此字体提供 519 个免费的可缩放矢量图标。这个图书馆是完全免费的，供个人和商业使用。这些图标可以轻松定制。最初，它们是为 Bootstrap 开发的。

  • Bootstrap Glyphicons

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

  • Google's Material Icons

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