CSS 如何在 Font Awesome 符号上添加徽章

在本文中，我们将介绍如何在 Font Awesome 符号上添加徽章。徽章是一种小图标，可以用来表示某种特定的状态或者标记。

阅读更多：CSS 教程

1. 使用 CSS 伪元素添加徽章

最常见的添加徽章的方法是使用 CSS 伪元素。我们可以通过设置伪元素的内容、样式和位置来创建徽章效果。

首先，我们需要在 HTML 中插入一个 Font Awesome 图标元素，并为它添加一个类名，以便后续样式的设置。例如：

<i class="fa fa-envelope"></i>

接下来，在 CSS 中，我们可以通过设置伪元素来创建徽章。使用 ::before 或者 ::after 伪元素都可以，具体使用哪一个取决于个人喜好。

.fa-envelope::before {
  content: "1";
  background-color: red;
  color: white;
  font-size: 12px;
  border-radius: 50%;
  padding: 2px 6px;
  position: absolute;
  top: -5px;
  right: -5px;
}

在上面的代码中，我们设置了徽章内容为数字 “1”，背景颜色为红色，文字颜色为白色，字体大小为 12 像素，边框圆角半径为 50%，内边距为 2px 上下、6px 左右，位置固定在原始图标的右上角。

这样，我们就通过 CSS 伪元素成功添加了一个徽章在 Font Awesome 符号上。

2. 使用 CSS 类添加徽章

除了使用伪元素，我们还可以通过添加 CSS 类的方式来创建徽章效果。

首先，在 HTML 中添加一个 Font Awesome 图标元素，并为其添加一个类名，以便后续样式的设置。例如：

<i class="fa fa-envelope badge">1</i>

接下来，在 CSS 中，我们可以为这个类设置样式来创建徽章的效果。例如：

.badge {
  background-color: red;
  color: white;
  font-size: 12px;
  border-radius: 50%;
  padding: 2px 6px;
  position: relative;
  top: -5px;
  right: -5px;
}

在上面的代码中，我们设置了徽章的样式与之前相同，但是没有使用伪元素。通过给 Font Awesome 图标元素添加类名，我们成功地创建了徽章效果。

3. 使用 Font Awesome 的内置 Badge 功能

除了使用 CSS 手动添加徽章效果，Font Awesome 还提供了内置的 Badge 功能，可以直接在图标上添加徽章。

在 HTML 中，我们可以使用 data-badge 属性来添加徽章的内容。例如：

<i class="fa fa-envelope" data-badge="1"></i>

默认情况下，徽章的样式和位置是由 Font Awesome 自动控制的。但是我们也可以通过设置自定义样式来改变徽章的外观。

比如，我们可以在 CSS 中设置徽章的背景颜色、文字颜色等等：

.fa-envelope[data-badge]::after {
  background-color: red;
  color: white;
  font-size: 12px;
  border-radius: 50%;
  padding: 2px 6px;
  position: absolute;
  top: -5px;
  right: -5px;
}

在上面的代码中，我们使用 ::after 伪元素来设置徽章样式，并通过选择器 [data-badge] 来选择带有 data-badge 属性的 Font Awesome 图标元素。

通过使用 Font Awesome 的内置 Badge 功能，我们可以方便地添加徽章在符号上，而无需手动编写 CSS 样式。