向 Web Awesome 说 hello，最大的也是最好的开源 web 组件库。

CSS 伪元素

当更改项目中的 HTML 不是选项时，您可以使用 CSS 功能，在使用 Font Awesome Web 字体时向页面添加图标。

关于伪元素

CSS 具有一个称为伪元素的强大功能，它可以让您仅使用 CSS 在视觉上向页面添加内容。自 Font Awesome 还是个“小家伙”时起，它就利用 ::before 伪元素向页面添加图标。

我们已经了解到，Font Awesome 使用诸如 fa 和 fa-user 之类的类在您的网站中显示图标。让我们复制这些类的功能并使用 CSS 伪元素编写自己的类。

使用 CSS 伪元素添加图标

1. 为所有图标定义通用 CSS

首先，您需要添加一些适用于所有图标的通用 CSS 属性。最好先把这些属性处理掉，以便简化单个图标的 CSS。您可以将其作为单独的规则，也可以将样式包含在每个单独图标规则中（在下一步中）。

/* Step 1: Common Properties
  These styles are required to make icons render reliably */
.icon::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

2. 引用单个图标

在引用任何单个图标时，需要包含一些重要项目

将伪元素设置为与您在之前的通用设置步骤中使用的 ::before 或 ::after 相匹配。
将 font CSS 属性设置为正确的 CSS 自定义属性（请参阅下面的系列和样式备忘单）。但请注意，双色调需要特殊处理。
将内容设置为我们其中一个图标的统一码值。

/* Step 1: Common Properties: All required to make icons render reliably - we did this above but it's included here for the full demo */
.icon::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Step 2: Reference Individual Icons */
/* Note: Make sure to include the correct weight and Unicode value for the icon */

/* an example rule targeting any element with the "account" class to render fa-user icon in the Solid style */
.account::before {
  font: var(--fa-font-solid);
  content: '\f007';
}

/* an example rule targeting any element with the "warning" class to render fa-triangle-exclamation icon in the Regular style */
.warning::before {
  font: var(--fa-font-regular);
  content: '\f071';
}

/* an example rule targeting any element with the "updates" class to render fa-newspaper icon in the Light style */
.updates::before {
  font: var(--fa-font-light);
  content: '\f1ea';
}

/* an example rule targeting any element with the "contact" class to render fa-message icon in the Thin style */
.updates::before {
  font: var(--fa-font-thin);
  content: '\f27a';
}

/* an example rule targeting any element with the "delete" class to render fa-trash icon in the Sharp Solid style */
.delete::before {
  font: var(--fa-font-sharp-solid);
  content: '\f1f8';
}

/* an example rule targeting any element with the "add" class to render fa-circle-plus icon in the Sharp Regular style */
.add::before {
  font: var(--fa-font-sharp-regular);
  content: '\f055';
}

/* an example rule targeting any element with the "gaming" class to render fa-discord Brand icon */
.gaming::before {
  font: var(--fa-font-brands);
  content: '\f392';
}

/* an example rule targeting any element with the "custom-icon" class to render a custom icon (uploaded to a kit) */
.custom-icon::before {
  font-family: 'Font Awesome Kit'; /* note that you need to use "font-family" for custom icons */
  content: '\[CUSTOM*ICON_UNICODE]'; /* replace with custom icon's unicode value \*/
}

CSS 伪元素和双色调

使用 CSS 伪元素渲染双色调图标遵循类似的设置，但需要使用 ::before 和 ::after 伪元素，以及更多样式设置。

1. 为双色调图标定义通用 CSS

所有双色调图标都需要一些特定于双色调样式的共享 CSS 属性。同样，最好先在 CSS 中将其处理掉，以便简化图标定义。

向包含伪元素的元素添加样式以支持定位。
将 font 设置为 CSS 自定义属性，添加必要的字体样式重置，并为伪元素添加定位样式。
为双色调图标的每一层设置默认的不透明度水平和颜色。

/* Step 1: Common Duotone positioning properties: All required to make icons render reliably */
.icon-duotone {
  position: relative;
  padding-left: 1.25em; /* make space for the width of the absolutely positioned icon */
}

/* Step 2: Set the font styles for Duotone */
.icon-duotone::before,
.icon-duotone::after {
  font: var(--fa-font-duotone);

  /* include the basic Font Awesome font style settings if you haven't already */
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;

  /* position both layers of the icon to the left, set our fixed-width width, horizontally center layers, and then vertically align them so they flex with different line heights */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25em;
  text-align: center;
}

.custom-icon-duotone::before,
.custom-icon-duotone::after {
  font-family: 'Font Awesome Kit Duotone'; /* note that you need to use "font-family" for custom icons */
}

/* Step 3: Set the default opacity levels and colors for each layer */
.icon-duotone::before {
  color: var(--fa-primary-color, inherit);
  opacity: 1;
  opacity: var(--fa-primary-opacity, 1);
}

.icon-duotone::after {
  color: var(--fa-secondary-color, inherit);
  opacity: var(--fa-secondary-opacity, 0.4);
}

2. 引用单个图标的图层

引用单个双色调图标的工作原理与所有 CSS 伪元素图标的使用方式非常相似。将内容设置为我们其中一个图标的统一码值。对于双色调图标，您将有两个值，每个双色调层一个。对于 door-open，您将有 \f52b 作为主层，\f52b\f52b 作为次要层。

/* Step 4: Reference an individual icon's layers using unicodes */
/* This rule renders the primary duotone for the door-open icon */
.icon-login::before {
  content: '\f52b';
}

/* This rule renders the secondary duotone for the door-open icon */
.icon-login::after {
  content: '\f52b\f52b';
}

.custom-icon-duotone::before {
  content: '\[CUSTOM*ICON_UNICODE]'; /* replace with custom icon's unicode value \*/
}

.custom-icon-duotone::after {
  content: '\[CUSTOM*ICON_UNICODE]\[CUSTOM_ICON_UNICODE]'; /* replace with custom icon's unicode value, twice \*/
}

字体系列和样式备忘单

这是一个方便的图表，显示了您可以在伪元素 CSS 规则中使用的字体样式/粗细，以定义您要使用的图标系列和样式。

样式	可用性	@font-face 字体系列	@font-face 粗细	CSS 自定义属性
品牌	免费计划	`Font Awesome 6 Free` 或 `Font Awesome 6 Pro`（适用于 Pro 用户）	`400`	`--fa-font-brands`
实心	免费计划	`Font Awesome 6 Free` 或 `Font Awesome 6 Pro`（适用于 Pro 用户）	`900`	`--fa-font-solid`
常规	仅限 Pro	`Font Awesome 6 Pro`	`400`	`--fa-font-regular`
浅色	仅限 Pro	`Font Awesome 6 Pro`	`300`	`--fa-font-light`
细体	仅限 Pro	`Font Awesome 6 Pro`	`100`	`--fa-font-thin`
锐利实心	仅限 Pro	`Font Awesome 6 Sharp`	`900`	`--fa-font-sharp-solid`
锐利常规	仅限 Pro	`Font Awesome 6 Sharp`	`400`	`--fa-font-sharp-regular`
锐利细体	仅限 Pro	`Font Awesome 6 Sharp`	`300`	`--fa-font-sharp-light`
锐利细体	仅限 Pro	`Font Awesome 6 Sharp`	`100`	`--fa-font-sharp-thin`
自定义图标	仅限 Pro 工具包	`Font Awesome 工具包`	-	-

双色调图标是一个特殊情况，我们在 CSS 伪元素和双色调部分中介绍了它。

样式	可用性	@font-face 字体系列	@font-face 粗细	CSS 自定义属性
双色调	仅限 Pro	`Font Awesome 双色调`	`900`	`--fa-font-duotone`
自定义双色调图标	仅限 Pro 工具包	`Font Awesome 工具包双色调`	-	-

伪元素和 Sass（SCSS）

使用我们的 @include fa-icon- 混合实用程序，您可以轻松地使用自定义伪元素 CSS 添加图标。这些混合程序处理我们工具包中捆绑的基本渲染，以确保图标完美显示。除此之外，它们还定义了渲染图标的正确图标样式。

// Solid style of user
.user {
  @include fa-icon-solid($fa-var-user);
}

// Regular style of triangle-exclamation
.triangle-exclamation {
  @include fa-icon-regular($fa-var-triangle-exclamation);
}

// Light style of newspaper
.newspaper {
  @include fa-icon-light($fa-var-newspaper);
}

// Thin style of paintbrush-fine
.paintbrush-fine {
  @include fa-icon-thin($fa-var-paintbrush-fine);
}

// Duotone style of camera-retro
.camera-retro {
  @include fa-icon-duotone($fa-var-camera-retro);
}

// Twitter brand icon
.twitter {
  @include fa-icon-brands($fa-var-twitter);
}

// Sharp Solid style of trash
.trash {
  @include fa-icon-solid($fa-var-trash);
  @include fa-family-sharp(); // define Sharp family
}

// Sharp Regular style of trash
.trash {
  @include fa-icon-regular($fa-var-trash);
  @include fa-family-sharp(); // define Sharp family
}

// Classic Solid style of trash
.trash {
  @include fa-icon-solid($fa-var-trash);
  @include fa-family-classic(

  ); // explicity setting Classic family (optional since this is Font Awesome's default)
}

如果您想手动定义这些样式规则，也可以这样做。

Font Awesome Sharp 需要额外的混合程序

如果您使用我们的混合程序在我们的锐利样式系列中渲染图标，则需要除了 @include fa-icon- 混合程序之外还要引用 @include fa-family-sharp 混合程序。

伪元素和 Less

使用我们的 .fa-icon- 混合实用程序，您可以轻松地使用自定义伪元素 CSS 添加图标。这些混合程序处理我们工具包中捆绑的基本渲染，以确保图标完美显示。除此之外，它们还定义了渲染图标的正确图标样式。

// Solid style of user
.user {
  .fa-icon-solid(@fa-var-user);
}

// Regular style of triangle-exclamation
.triangle-exclamation {
  .fa-icon-regular(@fa-var-triangle-exclamation);
}

// Light style of newspaper
.newspaper {
  .fa-icon-light(@fa-var-newspaper);
}

// Thin style of paintbrush-fine
.paintbrush-fine {
  .fa-icon-thin(@fa-var-paintbrush-fine);
}

// Duotone style of camera-retro
.camera-retro {
  .fa-icon-duotone(@fa-var-camera-retro);
}

// Twitter brand icon
.twitter {
  .fa-icon-brands(@fa-var-twitter);
}

// Sharp Solid style of trash
.trash {
  .fa-icon-solid(@fa-var-trash);
  .fa-family-sharp(); // define Sharp family
}

// Sharp Regular style of trash
.trash {
  .fa-icon-regular(@fa-var-trash);
  .fa-family-sharp(); // define Sharp family
}

// Classic Solid style of trash
.trash {
  .fa-icon-solid(@fa-var-trash);
  .fa-family-classic(); // explicity setting Classic family (optional since this is Font Awesome's default)
}

如果您想手动定义这些样式规则，也可以这样做。

Font Awesome Sharp 需要额外的混合程序

如果您使用我们的混合程序在我们的锐利样式系列中渲染图标，则需要除了 .fa-icon- 混合程序之外还要引用 .fa-family-sharp 混合程序。

使用我们的 SVG+JS 框架的 CSS 伪元素

如果您使用我们的 SVG + JS 框架来渲染图标，则需要做一些额外的事情

启用伪元素

使用 CSS 伪元素来渲染图标在使用我们的 SVG + JS 框架时默认情况下是禁用的。您需要将 <script data-search-pseudo-elements ... > 属性添加到调用 Font Awesome 的 <script> 元素中。

将伪元素设置为显示为无

由于我们的 JS 会找到每个图标引用（使用您的伪元素样式）并将图标自动插入到页面的 DOM 中，因此我们需要隐藏实际的 CSS 创建的伪元素。

<html>
  <head>
    <script data-search-pseudo-elements defer src="/your-path-to-fontawesome/js/all.js"></script>

    <style>
      .icon::before {
        display: none;
      }

      .login::before {
        font: var(--fa-font-solid);
        content: '\f007';
      }

      .tps::before {
        font: var(--fa-font-solid);
        content: '\f1ea';
      }
    </style>
  </head>
  <body>
    <ul style="margin: 0;">
      <li><span class="icon login"></span> Login</li>
      <li><span class="icon tps"></span> TPS Reports</li>
    </ul>
  </body>
</html>

支持动态更改

让我们用一些 JavaScript 和 jQuery 来切换元素的类，使它更有趣一些。

<script>
  setInterval(function () {
    $('.ninety-four').toggleClass('arrow')
  }, 1000)
</script>

<style>
  .ninety-four::after {
    margin-left: 0.25em;
    font-size: 2em;
    vertical-align: middle;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f0c8';
  }

  .ninety-four.arrow::after {
    content: '\f152';
  }
</style>

<a class="ninety-four" href="https://en.wikipedia.org/wiki/Blink_element"
  >Hey, do you remember the blink tag?</a
>

自定义图标和伪元素使用自定义图标作为 CSS 伪元素，并使用 Webfont 工具包上传

CSS 伪元素

关于伪元素

使用 CSS 伪元素添加图标

1. 为所有图标定义通用 CSS

2. 引用单个图标

CSS 伪元素和双色调

1. 为双色调图标定义通用 CSS

2. 引用单个图标的图层

字体系列和样式备忘单

伪元素和 Sass（SCSS）

Font Awesome Sharp 需要额外的混合程序

伪元素和 Less

Font Awesome Sharp 需要额外的混合程序

使用我们的 SVG+JS 框架的 CSS 伪元素

启用伪元素

将伪元素设置为显示为无

支持动态更改

相关主题