跳到内容
Font Awesome 文档
欢迎 Web Awesome，最大且最棒的开源 Web 组件库。
今天预订！

jQuery

Font Awesome 与 jQuery 配合良好，尤其是在您使用 Web 字体时。但如果您使用 SVG + JS，则需要进行一些调整。

我们将介绍 SVG 的工作原理以及您成功集成 jQuery 所需的内容。下面我们将描述一个使用嵌套的简单选项。如果嵌套对您不起作用，我们还提供了一些其他信息和替代选项，可以帮助您入门。

在父元素内嵌套 SVG 标签

减少 jQuery 等库出现问题的一个快速方法是允许 SVG 标签嵌套在父标签中，**这将允许事件绑定和其他 DOM 操作正常工作。**

首先，我们需要通过 JavaScript 配置 Font Awesome SVG，以便通过在核心脚本中添加 data-auto-replace-svg="nest" 来进行嵌套

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

或者，如果您使用的是 all.js

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

如果我们随后在页面中添加一个 <i> 标签

<i class="fa-solid fa-camera"></i>

SVG 图标将在 <i> 标签中呈现

<i data-fa-i2svg>
  <svg
    class="svg-inline--fa fa-camera fa-w-16"
    aria-hidden="true"
    data-prefix="fa-solid"
    data-icon="camera"
    role="img"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 512 512"
    data-fa-i2svg=""
  >
    <path
      fill="currentColor"
      d="M188.12 210.74L142.86 256l45.25 45.25L233.37 256l-45.25-45.26zm113.13-22.62L256 142.86l-45.25 45.25L256 233.37l45.25-45.25zm-90.5 135.76L256 369.14l45.26-45.26L256 278.63l-45.25 45.25zM256 0C114.62 0 0 114.62 0 256s114.62 256 256 256 256-114.62 256-256S397.38 0 256 0zm186.68 295.6l-11.31 11.31c-3.12 3.12-8.19 3.12-11.31 0l-28.29-28.29-45.25 45.25 33.94 33.94 16.97-16.97c3.12-3.12 8.19-3.12 11.31 0l11.31 11.31c3.12 3.12 3.12 8.19 0 11.31l-16.97 16.97 16.97 16.97c3.12 3.12 3.12 8.19 0 11.31l-11.31 11.31c-3.12 3.12-8.19 3.12-11.31 0l-16.97-16.97-16.97 16.97c-3.12 3.12-8.19 3.12-11.31 0l-11.31-11.31c-3.12-3.12-3.12-8.19 0-11.31l16.97-16.97-33.94-33.94-45.26 45.26 28.29 28.29c3.12 3.12 3.12 8.19 0 11.31l-11.31 11.31c-3.12 3.12-8.19 3.12-11.31 0L256 414.39l-28.29 28.29c-3.12 3.12-8.19 3.12-11.31 0l-11.31-11.31c-3.12-3.12-3.12-8.19 0-11.31l28.29-28.29-45.25-45.26-33.94 33.94 16.97 16.97c3.12 3.12 3.12 8.19 0 11.31l-11.31 11.31c-3.12 3.12-8.19 3.12-11.31 0l-16.97-16.97-16.97 16.97c-3.12 3.12-8.19 3.12-11.31 0l-11.31-11.31c-3.12-3.12-3.12-8.19 0-11.31l16.97-16.97-16.97-16.97c-3.12-3.12-3.12-8.19 0-11.31l11.31-11.31c3.12-3.12 8.19-3.12 11.31 0l16.97 16.97 33.94-33.94-45.25-45.25-28.29 28.29c-3.12 3.12-8.19 3.12-11.31 0L69.32 295.6c-3.12-3.12-3.12-8.19 0-11.31L97.61 256l-28.29-28.29c-3.12-3.12-3.12-8.19 0-11.31l11.31-11.31c3.12-3.12 8.19-3.12 11.31 0l28.29 28.29 45.25-45.26-33.94-33.94-16.97 16.97c-3.12 3.12-8.19 3.12-11.31 0l-11.31-11.31c-3.12-3.12-3.12-8.19 0-11.31l16.97-16.97-16.97-16.97c-3.12-3.12-3.12-8.19 0-11.31l11.31-11.31c3.12-3.12 8.19-3.12 11.31 0l16.97 16.97 16.97-16.97c3.12-3.12 8.19-3.12 11.31 0l11.31 11.31c3.12 3.12 3.12 8.19 0 11.31l-16.97 16.97 33.94 33.94 45.26-45.25-28.29-28.29c-3.12-3.12-3.12-8.19 0-11.31l11.31-11.31c3.12-3.12 8.19-3.12 11.31 0L256 97.61l28.29-28.29c3.12-3.12 8.19-3.12 11.31 0l11.31 11.31c3.12 3.12 3.12 8.19 0 11.31l-28.29 28.29 45.26 45.25 33.94-33.94-16.97-16.97c-3.12-3.12-3.12-8.19 0-11.31l11.31-11.31c3.12-3.12 8.19-3.12 11.31 0l16.97 16.97 16.97-16.97c3.12-3.12 8.19-3.12 11.31 0l11.31 11.31c3.12 3.12 3.12 8.19 0 11.31l-16.97 16.97 16.97 16.97c3.12 3.12 3.12 8.19 0 11.31l-11.31 11.31c-3.12 3.12-8.19 3.12-11.31 0l-16.97-16.97-33.94 33.94 45.25 45.26 28.29-28.29c3.12-3.12 8.19-3.12 11.31 0l11.31 11.31c3.12 3.12 3.12 8.19 0 11.31L414.39 256l28.29 28.28a8.015 8.015 0 0 1 0 11.32zM278.63 256l45.26 45.25L369.14 256l-45.25-45.26L278.63 256z"
    ></path>
  </svg>
</i>

嵌套的替代方法

如果您不嵌套，这里就是您需要知道的内容... 库会寻找看起来像图标的标签

<i class="fa-solid fa-coffee" data-fa-mask="fa-solid fa-circle"></i>

它们将替换为新的 svg 元素

<svg
  class="svg-inline--fa fa-coffee fa-w-20"
  aria-hidden="true"
  data-fa-i2svg=""
  data-prefix="fa-solid"
  data-icon="coffee"
  role="img"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 640 512"
>
  <path
    fill="currentColor"
    d="M192 384h192c53 0 96-43 96-96h32c70.6 0 128-57.4 128-128S582.6 32 512 32H120c-13.3 0-24 10.7-24 24v232c0 53 43 96 96 96zM512 96c35.3 0 64 28.7 64 64s-28.7 64-64 64h-32V96h32zm47.7 384H48.3c-47.6 0-61-64-36-64h583.3c25 0 11.8 64-35.9 64z"
  ></path>
</svg>
<!-- <i class="fa-solid fa-coffee"></i> -->

这是如何发生的？

  1. Font Awesome javascript 通过查看 CSS 类（如 fas、fa-solid 或 fa-dragon）来查找 Font Awesome HTML DOM 元素。
  2. 它会弄清楚诸如样式前缀 (fas 或 fa-solid)、图标 (dragon) 和元素上的任何样式实用程序之类的东西。
  3. 它会安排在下一个方便的时候替换 <i> 元素。
  4. 当浏览器准备就绪时，**<i> DOM 元素将被新的 <svg> 元素替换**。
  5. 在新的 <svg> 元素下方添加一个注释，代表原始 HTML，以方便起见。

为什么这很重要？

由于元素被替换，任何对该元素的绑定都将丢失！

下面的示例将无法正常工作

<nav>
  <ul style="list-style: none; margin: 0; padding: 0;">
    <li><i class="fa fa-user fa-2x"></i></li>
  </ul>
</nav>


<script>
  document.addEventListener('DOMContentLoaded', function () {
    $('nav i').on('click', function () {
      // the i element will not exist once the icon is rendered
      alert('You will never see this')
    })
  })
</script>

下面的示例将正常工作，因为它不依赖于 <i> 元素

<nav>
  <ul style="list-style: none; margin: 0; padding: 0;">
    <li><i class="fa fa-user fa-2x"></i></li>
  </ul>
</nav>


<script>
  document.addEventListener('DOMContentLoaded', function () {
    $('nav li').on('click', function () {
      // we are letting the li bind to the event
      alert('This works, though')
    })
  })
</script>

将事件附加到图标

如果您绝对需要将事件附加到图标，您可以使用 data-fa-i2svg 属性，但您需要允许动态创建 SVG 元素。

您可以将事件附加到祖先元素并过滤图标

<nav>
  <ul style="list-style: none; margin: 0; padding: 0;">
    <li><i class="fa fa-user fa-2x"></i></li>
  </ul>
</nav>


<script>
  document.addEventListener('DOMContentLoaded', function () {
    $('nav').on('click', '[data-fa-i2svg]', function () {
      alert('You clicked the icon itself')
    })
  })
</script>

这将无法正常工作，并且会让您感到难过

<nav>
  <ul>
    <li><i class="fa fa-user fa-2x"></i></li>
  </ul>
</nav>


<script>
  document.addEventListener('DOMContentLoaded', function () {
    var icon = $('nav i')


    $('nav li').on('click', '[data-fa-i2svg]', function () {
      icon.addClass('active') // This has no effect, the original icon has been replaced
    })
  })
</script>

通过更改类来更改图标

如果要更换图标，可以通过更改元素上的类来实现，例如：

<button>Open up <i class="fa fa-angle-right"></i></button>


<script>
  document.addEventListener('DOMContentLoaded', function () {
    $('button').on('click', function () {
      $(this)
        .find('[data-fa-i2svg]')
        .toggleClass('fa-angle-down')
        .toggleClass('fa-angle-right')
    })
  })
</script>