|Automatically add accessibility features like
|Insert the supporting CSS into the
<head> of the HTML document?
true to replace any elements that look like icons with the inline SVG. Set to
nest to insert SVGs as child elements.
|Class prefix for icons and CSS styles like
|If replacing with inline SVG keep an HTML comment
<-- --> with the original markup
|For supporting browsers, add markers in the Performance section of developer tools?
|Watch the DOM for any changes and add, replace, or modify icons on-the-fly
|version >=5.8.0 Can be
async will make replace icons using
|Main CSS class for
<svg> tags replacements. All replacements will have this class.
|Searches for elements with a Font Awesome CSS
content property and replaces with inline SVG
|If an icon cannot be found show an animated "missing" icon in its place
Accessing the configuration
When using the
When using a package that provides access to the API through the browser:
Setting the configuration
Setting just one option using
<script> tag in the browser:
You can also set configuration values to true by simply adding the attribute without a value.
If you can't add any attributes to a
<script> tag you can set the configuration like this:
Font Awesome requires some base CSS styles to display icons at the correct
color and size and to enable the other styling options. When this option is
true (default) these styles are automatically inserted into the
<head> of the DOM.
true (default) this will cause Font Awesome to search through the DOM for any
<i> tags and automatically replace them with
For example this
Will be replaced with this
autoReplaceSvg through nesting
By default Font Awesome will replace elements. However, setting this value to
nest will cause Font Awesome to add a child element to the existing
Will be nested within the existing tag:
Used to modify the family prefix for the icon names. By changing this from
icon we would replace
To use the icon you would then use the following markup.
autoReplaceSvg or manually calling
dom.i2svg() you have the option to retain the original
<i> tag as a comment underneath the replacement
<svg> tag. This is beneficial for debugging but does clutter the DOM a little.
You can change the default value of
Will prevent Font Awesome from adding the comment:
When your project first loads and you have enabled
Awesome will search through your document for
<i> tags and replace them with
When additional changes occur to the page, through user interaction or by other
means, and icons are modified or they are added to the page by placing more
<i> tags in the DOM Font Awesome needs to kick into gear again and do the
same type of work it did when the page first loaded.
You can tell Font Awesome to watch your page for changes using
MutationObservers(opens new window) by setting
Replacing icons with SVG actually happens in two steps:
- Icons are parsed to pull out information such as icon name, style, and any additional stuff like Power Transforms
The reason this happens in two steps is to reduce
jank(opens new window) :
the costly and visual reduction of performance as your page renders.
After the array of DOM changes are computed they are, by default, registered in a function to be ran
window.requestAnimationFrame(). This optimizes the changes in the DOM to a period of time
in the browser's lifecyle that makes it the most effecient.
While this does increase performance it can cause a flash in the browser when the icons render since the rendering
In some environments this is not desirable and taking the additional performance hit of rendering the icons
synchronously is worth the performance degradation.
To force Font Awesome to immediately make the DOM changes after an icon is found for replacement you can use
false by default) you can have Font Awesome search your DOM for any elements that have:
- A Font Awesome matching
font-family values are:
Font Awesome 5 Solid,
Font Awesome 5 Regular,
Font Awesome 5 Light, and
Font Awesome 5 Brands.
To help with debugging missing icons or mistyped icon names you can use
showMissingIcons set to
true (default) which will show a missing icon indicator. Here's an example: