如何使用纯 CSS 使用带有图标的按钮？

CSS 提供了很多方式来创建按钮，但是如何创建带有图标的按钮呢？在本文中，我们将使用纯 CSS 来创建带有图标的按钮。

1. 使用 Font Awesome

Font Awesome 是一个非常受欢迎的图标集，其中包含了很多常用图标。为了创建带有 Font Awesome 图标的按钮，您需要先引入 Font Awesome：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-Vqd3q1Y0krC2vX+HdW8k83sPzRYVHXQRbJtbEYw8Q+NnIQqBuAH+LrPL9B+NL+kN" crossorigin="anonymous">

然后，在按钮上添加一个带有 Font Awesome 类的 i 标签：

<button class="icon-btn"><i class="fas fa-search"></i></button>

这将创建一个带有搜索图标的按钮。您可以随时更改图标和按钮类名以满足您的需求。

2. 使用 Unicode 符号

有一些 Unicode 符号可以用作图标，例如搜索符号 🔍、叉号 ✖、加号 + 等等。要在按钮上使用这些符号，您只需要将 Unicode 符号添加到按钮标签中即可：

<button>&#x1F50D; Search</button>

这将创建一个带有搜索图标的按钮。同样地，您可以更改 Unicode 符号和按钮文本以满足您的需求。

3. 使用 CSS 生成内容

还有一种方式是使用 CSS 生成内容。为了创建带有 CSS 生成内容的按钮，您只需要在按钮上添加一个带有伪元素的类，然后在该伪元素上使用 CSS 生成内容：

<button class="icon-btn"></button>

.icon-btn::before {
  content: "\f002"; /*  Unicode 字符 */
  font-family: "Font Awesome 5 Free"; /*  字体 */
}

这将创建一个带有 Font Awesome 中编号为 f002 的图标的按钮。同样地，您可以更改生成的内容和按钮类名以满足您的需求。

总结

在本文中，我们介绍了三种方式来创建带有图标的按钮：使用 Font Awesome、使用 Unicode 符号、使用 CSS 生成内容。CSS 为我们提供了灵活的工具来自定义按钮样式，使我们能够更好地控制按钮外观和内部结构。