Font Awesome pairs well with jQuery, especially if you are using Web Fonts. But if you're using SVG + JS, you'll need to make a few adjustments.
We’ll cover how SVG works and what you need to integrate with jQuery successfully. Below we'll describe an easy option using nesting. If nesting doesn’t work for you, we've got some more information and alternate options that can get you going.
Nesting SVG Tags Within Their Parent
A quick way to reduce 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 by adding data-auto-replace-svg="nest" to the core script:
<script src="https://example.com/fontawesome/vVERSION/js/fontawesome.js" data-auto-replace-svg="nest"></script>
<script src="https://example.com/fontawesome/vVERSION/js/solid.js"></script>
<script src="https://example.com/fontawesome/vVERSION/js/brands.js"></script>
Or if you're using the all.js:
<script src="https://example.com/fontawesome/vVERSION/js/all.js" data-auto-replace-svg="nest"></script>
If we then add an <i> tag to the page:
<i class="fa-solid 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="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>
Alternatives to Nesting
If you don't nest, here's what you need to know.... The library seeks out tags that look like icons:
<i class="fa-solid fa-coffee" data-fa-mask="fa-solid 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="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> -->
How Does This Happen?
- The Font Awesome javascript looks for Font Awesome HTML DOM elements by looking at CSS classes, like
fas,fa-solidorfa-dragon. - It figures out things like the style prefix (
fasorfa-solid), the icon (dragon), and any styling utilities on the element. - It schedules the replacement of the
<i>element for the next convenient time. - When the browser is ready the
<i>DOM element is replaced with a new<svg>element. - 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!
The example below will not 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>
The example below will work 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>
Attaching Events to the Icon
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.
You can 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>
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
If you want to swap out an icon, you can do that by changing the classes on the element, like this:
<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>