jQuery+SVG+JS

带有 JavaScript 的 Font Awesome SVG 与 jQuery 兼容，但需要一些额外的理解和规划。了解 SVG 的工作原理以及成功与 jQuery 集成所需的操作。

这些文档仅在您使用 Font Awesome 的 SVG + JS 版本时适用。如果这看起来太复杂，您可以考虑切换到使用 CSS 的 Web 字体。 Font Awesome 5 中的每项技术都有其优势，与 jQuery 集成可能有点令人生畏。将 SVG 标签嵌套在 <i> 标签内也可能对您有所帮助。

#在其父项中嵌套 SVG 标签

缓解 jQuery 等库问题的一种快速方法是允许 SVG 标签嵌套在父标签中，这将允许事件绑定和其他 DOM 操作起作用。

首先，我们需要用 JavaScript 配置 Font Awesome SVG 来嵌套：

 <script src="https://use.fontawesome.com/releases/vVERSION/js/all.js" data-auto-replace-svg="nest"></script>

如果我们再向页面添加一个 <i> 标签：

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

SVG 图标在 <i> 标签内呈现：

  <i data-fa-i2svg>
    <svg class="svg-inline--fa fa-camera fa-w-16" aria-hidden="true" data-prefix="fas" 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>

What is data-fa-i2svg?

Font Awesome 使用此特殊标记来标记已呈现为 SVG 图标的元素。字符i2svg是“i tags to SVG”的缩写。

#如果你不嵌套，这就是你需要知道的

该库寻找看起来像图标的标签：

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

它们被替换为新的 svg 元素：

#这是如何实现的？

它寻找类似于 fas fa-coffee 的 DOM 元素
它计算出前缀 (fas)、图标 (coffee) 和其他任何感兴趣的东西
它安排在下一个方便的时间更换 <i> 元素
当浏览器准备就绪时，<i> DOM 元素将替换为新的 <svg> 元素
为方便起见，在表示原始 HTML 的新 <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 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>

避免创建对图标的 JavaScript 变量引用

由于 Font Awesome 正在动态替换和修改您的图标，因此任何对图标的引用都不会按预期工作。

这是行不通的，会让你伤心：

 <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>