跳到内容
Font Awesome 文档
欢迎 Web Awesome，最大最好的开源 Web 组件库。
立即预订！

配置

使用以下属性控制 Font Awesome SVG 的 JavaScript 功能。

选项

名称
默认值
目的
autoA11ytrue自动添加 无障碍功能，如 aria-hidden？
autoAddCsstrue将支持的 CSS 插入 HTML 文档的 <head> 中？
autoReplaceSvgtrue*设置为 true 以用内联 SVG 替换任何看起来像图标的元素。设置为 nest 以将 SVG 插入为子元素。
cssPrefix'fa'图标和 CSS 样式（如 fa-spin）的类前缀。此属性以前称为 familyPrefix。 familyPrefix 仍然可以使用，但现在与我们的 Family 图标样式可能会产生混淆。
familyDefault'classic'如果未指定此属性，则 Font Awesome Classic 是默认值。对于 Sharp 图标，只需在相同方式中添加 sharp！
keepOriginalSourcetrue如果用内联 SVG 替换，请保留一个 HTML 注释 <-- -->，其中包含原始标记
measurePerformancefalse对于支持的浏览器，在开发者工具的性能部分添加标记？
observeMutationstrue*监视 DOM 中的任何更改，并动态添加、替换或修改图标
mutateApproachasyncversion >=5.8.0 可以是 async 或 sync。如果为 async，将使用 requestAnimationFrame 替换图标
replacementClass'svg-inline--fa'<svg> 标签替换的主要 CSS 类。所有替换都将具有此类。
searchPseudoElementsfalse搜索具有 Font Awesome CSS family-name 和 content 属性的元素，并用内联 SVG 替换它们
showMissingIconstrue如果找不到图标，则在其位置显示一个动画的“缺少”图标
styleDefault'solid'如果未设置图标的样式或找不到图标的样式，则图标的默认样式将为 'solid'

访问配置

使用 @fortawesome/fontawesome-svg-core 包时

import { config } from '@fortawesome/fontawesome-svg-core'
console.log(config.autoA11y) // true

使用通过浏览器提供对 API 访问权限的包时

<script>
  alert(window.FontAwesome.config)
</script>

设置配置

使用 @fortawesome/fontawesome-svg-core 设置单个选项

import { config } from '@fortawesome/fontawesome-svg-core'
config.autoA11y = true

在浏览器中使用 <script> 标签

<html>
  <head>
    <script
      src="https://example.com/fontawesome/v6.5.2/js/all.js"
      data-auto-a11y="true"
    ></script>
  </head>
  <body></body>
</html>
  <head>
    <script
      src="https://example.com/fontawesome/v6.5.2/js/all.js"
      data-auto-a11y="true"
    ></script>
  </head>
  <body></body>
</html>

您也可以通过简单地添加没有值的属性将配置值设置为 true。

<head>
  <!-- Notice how the data-search-pseudo-elements has no explicit value. This sets it to "true". -->
  <script
    src="https://example.com/fontawesome/v6.5.2/js/all.js"
    data-search-pseudo-elements
  ></script>
</head>
<body></body>

如果您无法向 <script> 标签添加任何属性，则可以像这样设置配置

<head>
  <script>
    <!-- The settings you provide will be merged with the default settings -->
    FontAwesomeConfig = {
      searchPseudoElements: true
    }
  </script>
  <script src="https://example.com/fontawesome/v6.5.2/js/all.js"></script>
</head>
<body></body>

autoAddCss

Font Awesome 需要一些基本 CSS 样式才能以正确的颜色和大小显示图标，并启用其他样式选项。当此选项为 true（默认值）时，这些样式将自动插入 DOM 的 <head> 中。

autoReplaceSvg

当为 true（默认值）时，这将导致 Font Awesome 在 DOM 中搜索任何 <i> 标签，并自动将它们替换为 <svg> 标签。

<script
  src="https://example.com/fontawesome/v6.5.2/js/all.js"
  data-auto-replace-svg
></script>

例如，这个 <i> 标签

<i class="fas fa-kiwi-bird"></i>

将被替换为这个 <svg> 标签

<svg
  aria-hidden="true"
  data-prefix="fas"
  data-icon="kiwi-bird"
  role="img"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 576 512"
  class="svg-inline--fa fa-kiwi-bird fa-w-18 fa-2x"
  data-fa-i2svg
>
  <path
    fill="currentColor"
    d="M575.81 217.98C572.64 157.41 518.28 112 457.63 112h-9.37c-52.82 0-104.25-16.25-147.74-46.24-41.99-28.96-96.04-41.62-153.21-28.7C129.3 41.12-.08 78.24 0 224c.04 70.95 38.68 132.8 95.99 166.01V464c0 8.84 7.16 16 16 16h16c8.84 0 16-7.16 16-16v-54.26c15.36 3.96 31.4 6.26 48 6.26 5.44 0 10.68-.73 16-1.18V464c0 8.84 7.16 16 16 16h16c8.84 0 16-7.16 16-16v-59.43c14.24-5.06 27.88-11.39 40.34-19.51C342.07 355.25 393.86 336 448.46 336c25.48 0 16.01-.31 23.05-.78l74.41 136.44c2.86 5.23 8.3 8.34 14.05 8.34 1.31 0 2.64-.16 3.95-.5 7.09-1.8 12.05-8.19 12.05-15.5 0 0 .14-240.24-.16-246.02zM463.97 248c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24s24 10.74 24 24c0 13.25-10.75 24-24 24zm80 153.25l-39.86-73.08c15.12-5.83 28.73-14.6 39.86-25.98v99.06z"
  ></path>
</svg>
<!-- <i class="fas fa-kiwi-bird"></i> -->

通过嵌套 autoReplaceSvg

默认情况下，Font Awesome 将替换元素。但是，将此值设置为 nest 将导致 Font Awesome 向现有 <i> 标签添加一个子元素。

<script
  src="https://example.com/fontawesome/v6.5.2/js/all.js"
  data-auto-replace-svg="nest"
></script>

这个 <i> 标签

<i class="fas fa-kiwi-bird"></i>

将嵌套在现有标签中

<i data-fa-i2svg>
  <svg
    aria-hidden="true"
    data-prefix="fas"
    data-icon="kiwi-bird"
    role="img"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 576 512"
    class="svg-inline--fa fa-kiwi-bird fa-w-18 fa-2x"
  >
    <path
      fill="currentColor"
      d="M575.81 217.98C572.64 157.41 518.28 112 457.63 112h-9.37c-52.82 0-104.25-16.25-147.74-46.24-41.99-28.96-96.04-41.62-153.21-28.7C129.3 41.12-.08 78.24 0 224c.04 70.95 38.68 132.8 95.99 166.01V464c0 8.84 7.16 16 16 16h16c8.84 0 16-7.16 16-16v-54.26c15.36 3.96 31.4 6.26 48 6.26 5.44 0 10.68-.73 16-1.18V464c0 8.84 7.16 16 16 16h16c8.84 0 16-7.16 16-16v-59.43c14.24-5.06 27.88-11.39 40.34-19.51C342.07 355.25 393.86 336 448.46 336c25.48 0 16.01-.31 23.05-.78l74.41 136.44c2.86 5.23 8.3 8.34 14.05 8.34 1.31 0 2.64-.16 3.95-.5 7.09-1.8 12.05-8.19 12.05-15.5 0 0 .14-240.24-.16-246.02zM463.97 248c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24s24 10.74 24 24c0 13.25-10.75 24-24 24zm80 153.25l-39.86-73.08c15.12-5.83 28.73-14.6 39.86-25.98v99.06z"
    ></path>
  </svg>
</i>

cssPrefix

用于修改图标名称的 CSS 前缀。通过将其从 fa 更改为 icon，我们将用 icon-kiwi-bird 替换 fa-kiwi-bird。

<script
  src="https://example.com/fontawesome/v6.5.2/js/all.js"
  data-family-prefix="icon"
></script>

要使用该图标，您将使用以下标记。

<i class="fas icon-kiwi-bird"></i>

familyDefault

您可以使用 defaultFamily 为项目中的图标指定默认系列。以下是如何将默认系列设置为 sharp，并将其默认样式设置为 solid 的示例

config.familyDefault = 'sharp'

keepOriginalSource

当使用 autoReplaceSvg 或手动调用 dom.i2svg() 时，您可以选择保留原始 <i> 标签作为替换 <svg> 标签下面的注释。这对于调试很有益，但会稍微使 DOM 变得混乱。

<svg
  aria-hidden="true"
  data-prefix="fas"
  data-icon="kiwi-bird"
  role="img"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 576 512"
  class="svg-inline--fa fa-kiwi-bird fa-w-18 fa-2x"
  data-fa-i2svg
>
  <path
    fill="currentColor"
    d="M575.81 217.98C572.64 157.41 518.28 112 457.63 112h-9.37c-52.82 0-104.25-16.25-147.74-46.24-41.99-28.96-96.04-41.62-153.21-28.7C129.3 41.12-.08 78.24 0 224c.04 70.95 38.68 132.8 95.99 166.01V464c0 8.84 7.16 16 16 16h16c8.84 0 16-7.16 16-16v-54.26c15.36 3.96 31.4 6.26 48 6.26 5.44 0 10.68-.73 16-1.18V464c0 8.84 7.16 16 16 16h16c8.84 0 16-7.16 16-16v-59.43c14.24-5.06 27.88-11.39 40.34-19.51C342.07 355.25 393.86 336 448.46 336c25.48 0 16.01-.31 23.05-.78l74.41 136.44c2.86 5.23 8.3 8.34 14.05 8.34 1.31 0 2.64-.16 3.95-.5 7.09-1.8 12.05-8.19 12.05-15.5 0 0 .14-240.24-.16-246.02zM463.97 248c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24s24 10.74 24 24c0 13.25-10.75 24-24 24zm80 153.25l-39.86-73.08c15.12-5.83 28.73-14.6 39.86-25.98v99.06z"
  ></path>
</svg>
<i class="fas fa-kiwi-bird"></i>

您可以将 keepOriginalSource 的默认值更改为 false

<script
  src="https://example.com/fontawesome/v6.5.2/js/all.js"
  data-keep-original-source="false"
></script>

将阻止 Font Awesome 添加注释

<svg
  aria-hidden="true"
  data-prefix="fas"
  data-icon="kiwi-bird"
  role="img"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 576 512"
  class="svg-inline--fa fa-kiwi-bird fa-w-18 fa-2x"
  data-fa-i2svg
>
  <path
    fill="currentColor"
    d="M575.81 217.98C572.64 157.41 518.28 112 457.63 112h-9.37c-52.82 0-104.25-16.25-147.74-46.24-41.99-28.96-96.04-41.62-153.21-28.7C129.3 41.12-.08 78.24 0 224c.04 70.95 38.68 132.8 95.99 166.01V464c0 8.84 7.16 16 16 16h16c8.84 0 16-7.16 16-16v-54.26c15.36 3.96 31.4 6.26 48 6.26 5.44 0 10.68-.73 16-1.18V464c0 8.84 7.16 16 16 16h16c8.84 0 16-7.16 16-16v-59.43c14.24-5.06 27.88-11.39 40.34-19.51C342.07 355.25 393.86 336 448.46 336c25.48 0 16.01-.31 23.05-.78l74.41 136.44c2.86 5.23 8.3 8.34 14.05 8.34 1.31 0 2.64-.16 3.95-.5 7.09-1.8 12.05-8.19 12.05-15.5 0 0 .14-240.24-.16-246.02zM463.97 248c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24s24 10.74 24 24c0 13.25-10.75 24-24 24zm80 153.25l-39.86-73.08c15.12-5.83 28.73-14.6 39.86-25.98v99.06z"
  ></path>
</svg>

observeMutations

当项目首次加载并且您已启用 autoReplaceSvg 时，Font Awesome 会在您的文档中搜索 <i> 标签，并将它们替换为 SVG 图标。

当页面发生其他更改（通过用户交互或其他方式）以及图标被修改或通过在 DOM 中放置更多 <i> 标签将图标添加到页面时，Font Awesome 需要再次启动并执行与页面首次加载时相同的操作。

您可以通过将 observeMutations 设置为 true（默认值）来告诉 Font Awesome 使用 MutationObservers 监视页面中的更改。

<script
  src="https://example.com/fontawesome/v6.5.2/js/all.js"
  data-observe-mutations
></script>

mutateApproach

用 SVG 替换图标实际上分两步完成

  1. 解析图标以提取信息，例如图标名称、系列、样式以及其他内容，如强大的转换
  2. 将必要的 DOM 更改排队到 JavaScript 数组中

这样做的原因是分两步完成，以减少 jank：页面渲染时性能的成本高昂且视觉上的降低。

计算完 DOM 更改数组后，默认情况下，它们将注册在一个函数中，通过调用 window.requestAnimationFrame() 来运行。这将 DOM 中的更改优化到浏览器生命周期中的一个时间段，使其最有效率。

虽然这确实提高了性能，但在图标渲染时可能会导致浏览器闪烁，因为渲染是异步的。

在某些环境中，这是不可取的，并且承担渲染图标同步带来的额外的性能损失值得性能下降。

要强制 Font Awesome 在找到用于替换的图标后立即进行 DOM 更改，您可以使用 sync。

<script
  src="https://example.com/fontawesome/v6.5.2/js/all.js"
  data-mutate-approach="sync"
></script>

searchPseudoElements

通过将 searchPseudoElements 启用为 true（默认情况下为 false），您可以让 Font Awesome 在您的 DOM 中搜索任何具有以下属性的元素：

  1. 与 Font Awesome 匹配的 font
  2. 一个 content 属性
<head>
  <script
    src="https://example.com/fontawesome/v6.5.2/js/all.js"
    data-search-pseudo-elements
  ></script>
  <style>
    .glasses::before {
      display: none;
      font: var(--fa-font-solid);
      content: '\f530';
    }
  </style>
</head>
<body>
  <span class="glasses"></span>
</body>

有效的 font-family 值是：Font Awesome 5 Solid、Font Awesome 5 Regular、Font Awesome 5 Light 和 Font Awesome 5 Brands。

showMissingIcons

为了帮助调试缺少的图标或拼写错误的图标名称，您可以使用 showMissingIcons 设置为 true（默认值），这将显示一个缺少图标的指示器。以下是一个示例

<i class="fas fa-flaun-awesome"></i>

styleDefault

您可以使用 styleDefault 在您的项目中指定图标的默认样式。请参阅下面有关如何操作的方法——所有示例都将默认样式设置为 light

使用 Font Awesome 三个字母的前缀

config.styleDefault = 'fal'

仅使用样式名称

config.styleDefault = 'light'

使用 fa 前缀与样式名称一起使用

config.styleDefault = 'fa-light'