# Javascript Libraries Guides for using Font Awesome icons with popular JavaScript libraries and frameworks. > Font Awesome pairs well with JavaScript libraries like 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 JavaScript libraries 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. Make sure you: - Need to use [the SVG+JS method of Font Awesome](/web/dig-deeper/webfont-vs-svg.md). - Have your project files handy to work on. ## 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: ```html {1} ``` If we then add an `` tag to the page: ```html ``` The SVG icon is rendered within the `` tag: ```html ```

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." ## Alternatives to Nesting If you don't nest, here's what you need to know.... The library seeks out tags that look like icons: ```html ``` They are _replaced_ with a new `svg` element: ```html ``` ### How Does This Happen? 1. The Font Awesome javascript looks for Font Awesome HTML DOM elements by looking at CSS classes, like `fas`, `fa-solid` or `fa-dragon`. 1. It figures out things like the style prefix (`fas` or `fa-solid`), the icon (`dragon`), and any styling utilities on the element. 1. It schedules the replacement of the `` element for the next convenient time. 1. When the browser is ready **the `` DOM element is replaced with a new `` element**. 1. A comment is added below the new `` element representing the original HTML for convenience. ### Why Is This Important? **Since elements are replaced, any bindings to the element will be lost!** No The example below will not work: ```html
``` Yes The example below will work because it is **not dependent on the `` element**: ```html ``` ### 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. Yes You can attach the event to an ancestor and filter for the icon: ```html ```

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. No **This will not work** and will leave you sad: ```html ``` ## 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: ```html ```