📅 最后修改于: 2023-12-03 14:50:49.334000 🧑 作者: Mango
HTML 中的图标是指使用 Unicode 字符或 SVG 矢量图来表示常用的操作或信息的小图像。在现代 Web 设计中，图标已成为必不可少的元素。本文将介绍 HTML 中的图标角色，包括如何使用图标，以及常见的图标库。
HTML 中的图标可以用 Unicode 字符或 SVG 图像来表示。使用 Unicode 字符的图标可以直接在 HTML 中使用，而 SVG 图像需要将图像文件引入 HTML 中。
Unicode 是一种字符编码规范，用于在计算机中表示各种语言的字符。许多 Unicode 字符都是图标，可以在 Web 页面中使用。
HTML 中可以使用实体字符表示 Unicode 图标，例如：
<i class="fas fa-air-freshener"></i>
其中，fas fa-air-freshener 是一个名为 Font Awesome 的图标库中的图标。实体字符  表示这个图标。
SVG 是一种矢量图格式，可以用于创建可缩放的图像。SVG 图像可以通过 SVG 文件或数据 URI 引入 HTML 中。
在 HTML 中引入 SVG 文件的方式如下：
<svg width="100" height="100">
<use xlink:href="path/to/file.svg#icon-name"></use>
</svg>
其中，path/to/file.svg#icon-name 是 SVG 文件的路径和图标 ID。该方式只适用于单个图标文件，文件中的所有图标必须在同一页面中使用。
在 HTML 中引入 SVG 数据 URI 的方式如下：
<svg width="100" height="100" viewBox="0 0 24 24">
<path d="M20,11V5h2v14h-2v-6H4v6H2V5h2v6h16z"/>
</svg>
其中，<path> 元素包含了 SVG 路径数据，用于绘制图标。viewBox 属性定义了可见区域的大小。
常见的图标库包括 Font Awesome、Material Design Icons 和 Bootstrap Icons 等。这些库包含了数千个常用的图标，可以通过类名或实体字符引用。
Font Awesome 是一种广泛使用的图标库，包含了超过 7,000 个图标。该库使用字体文件来呈现图标，可以在 HTML 中轻松使用。
引入 Font Awesome 图标库：
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-igqvlQzfOdZDe7qqDjkupyIuV7YP9dymJPRfhLhU6Izly6O+UZJxKrqAkE95HY/" crossorigin="anonymous">
使用 Font Awesome 图标：
<i class="fas fa-rocket"></i>
Material Design Icons 是一个基于 Material Design 的图标库，包含了超过 4,000 个图标。该库可以在 HTML 中使用。
引入 Material Design Icons 图标库：
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css">
使用 Material Design Icons 图标：
<i class="mdi mdi-rocket"></i>
Bootstrap Icons 是 Bootstrap 官方提供的图标库，包含了超过 1,500 个图标。该库可以在 HTML 中使用。
引入 Bootstrap Icons 图标库：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
使用 Bootstrap Icons 图标：
<i class="bi bi-rocket"></i>
HTML 中的图标可以使用 Unicode 字符或 SVG 图像来表示。Unicode 图标可以直接在 HTML 中使用，而 SVG 图像需要将图像文件引入 HTML 中。常见的图标库包括 Font Awesome、Material Design Icons 和 Bootstrap Icons 等。