jQuery and SVG + JS

Font Awesome SVG with JavaScript is compatible with jQuery but requires some additional understanding and planning. Learn how SVG works and what you need to do to successfully integrate with jQuery.

Heads Up!

These docs only apply if you are using the SVG + JS version of Font Awesome. If this seems too complex, you might consider switching to Web Fonts with CSS. Each technology in Font Awesome 5 has its which, and integrating with jQuery can be a little daunting. Nesting the SVG tags inside of the <i> tags might also help you out.

Nesting SVG tags within their parent

A quick way to alleviate issues with libraries like jQuery is to allow the SVG tags to nest within the parent tag, which will allow event binding and other DOM manipulation to function.

First, we need to configure Font Awesome SVG with JavaScript to nest:

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

If we then add an <i> tag to the page:

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

The SVG icon is rendered within the <i> tag:

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

This special marker is used by Font Awesome to mark elements that have been rendered to SVG icons. The characters “i2svg” are short for “i tags to SVG”.

---

If you don’t nest, here’s what you need to know

The library seeks out tags that look like icons:

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

They are replaced with a new svg element:

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

How does this happen?

1. It looks for DOM elements which resemble fas fa-coffee
2. It figures out things like the prefix (fas), the icon (coffee), and anything else of interest
3. It schedules the replacement of the <i> element for the next convenient time
4. When the browser is ready the <i> DOM element is replaced with a new <svg> element
5. A comment is added below the new <svg> element representing the original HTML for convenience

Why is this important?

Since elements are replaced, any bindings to the element will be lost, and this example fails to work:

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

This example works because it is not dependent on the <i> element:

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

If you absolutely need to attach events to the icon, you can use the data-fa-i2svg attribute but you need to allow for the dynamic creation of the svg element.

Attach the event to an ancestor and filter for the icon:

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

Avoid creating JavaScript variable references to icons

Since Font Awesome is dynamically replacing and modifying your icons, any held reference to an icon will not work as expected.

This will not work and will leave you sad:

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

---

Changing icons by changing classes

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