CSS 图标用于向 Web 元素添加图形表示、符号或小图像。它们在 Web 开发中有多种用途，例如：
- 增强的用户体验：为网页上的各种元素提供视觉提示和上下文，例如，您可以添加一个图标来表示它们，而不是添加文本保存、删除等。
- 减少加载时间：与传统图像图标相比，CSS 图标通常很轻巧，这意味着它们可以快速加载，从而减少整体页面加载时间。
- 可扩展性：CSS 图标可以很容易地放大或缩小，而不会降低质量。这对于响应式网页设计很重要。
- 自定义：可以使用 CSS 规则更改其大小、颜色和其他视觉属性来自定义 CSS 图标。这种灵活性使您可以将图标与网站的整体设计和品牌相匹配。
- 辅助功能：可以设置 CSS 图标的样式以满足辅助功能标准，例如为屏幕阅读器提供替代文本。
- 减少 HTTP 请求：使用 CSS 图标可以减少网页发出的 HTTP 请求数量，因为它们通常是样式表的一部分。
为了创建 CSS 图标，开发人员经常使用 CSS 伪元素（：：before 和 ：：after）、图标字体或内联 SVG 等技术。每种方法都有其优点和权衡，选择取决于项目的具体需求。
流行的 CSS 图标库（如 Font Awesome、Material Icons 或自定义图标集）也被广泛用于简化向 Web 应用程序添加图标的过程。
添加图标
我们可以添加CSS图标的一些常用方法如下：
- 使用 CSS 伪元素（：：before 和 ：：after）：涉及使用 ：：before 和 ：：after 伪元素在 HTML 元素之前或之后插入内容，然后设置该内容的样式以显示图标。
- 图标字体：图标字体是包含图标作为字形的自定义字体。您可以通过设置适当的字体系列并指定图标的 Unicode 字符来使用这些字体来显示图标。
- 内联 SVG：涉及将 SVG（可缩放矢量图形）直接嵌入到 HTML 代码中。您可以创建或获取 SVG 图标并将它们作为内联元素插入。
- CSS背景图片：您可以通过在元素上设置 background-image 属性来使用CSS背景图片来显示图标。
- CSS 库和框架：许多 CSS 库和框架，如 Font Awesome、Material Icon 和 Bootstrap Icons，都提供了预先设计的图标集，您可以轻松地将其包含在项目中。它们通常带有即用型类或实用程序类。
- 自定义 CSS：您可以通过使用 CSS 属性（如宽度、高度、边框、边框半径等）设计和设置图标样式来为图标创建自己的自定义 CSS。这种方法使您可以完全控制图标的设计。
让我们看看每个示例。
CSS 图标 - 使用伪元素
像 ：：before 和 ：：after 这样的伪元素可用于在元素之前或之后插入图标，如以下示例所示：
CSS 图标 - Font Awesome 图标
为了添加 Font Awesome 的基本图标，您需要在 html 的 <head> 部分下添加以下链接：
要添加 Font Awesome 图标，请添加前缀 fa 以及图标的名称。例如：fa-car、fa-address-book。
以下示例演示如何使用 Font Awesome 图标：
CSS 图标 - 使用背景图像
背景图像也可以用作图标。
以下示例演示如何使用背景图像作为图标：
CSS 图标 - 使用 Bootstrap 图标
Bootstrap 提供的图标可以用作图标。您只需要在 html 代码的 <head> 部分添加以下链接：
注意：无需安装或下载 Bootstrap 图标。
以下示例演示如何使用 Bootstrap 图标：
CSS 图标 - 使用 Google 图标/字体
Goole 提供的图标也可以用作图标。您只需要在 html 代码的 <head> 部分添加以下链接：
注意：无需安装或下载 Google 图标。
以下示例演示如何使用 Google 图标：
