Stylesheet definitions required to properly display icons generated by the API in the DOM.
Generates the accompanying CSS that is necessary to correctly display icons. If
you choose to disable autoAddCss in the configuration you'll need to grab
these styles and insert them manually into the DOM.
Convenience method that will add the given CSS to the DOM <head>.
import{ dom }from'@fortawesome/fontawesome-svg-core'const css = dom.css()
dom.insertCss(css)
dom.watch(params)
Calls dom.i2svg() for you and watches the DOM for any additional icons being added or modified.
Different default configs
DOM watching is on by default when Font Awesome is loaded from @fortawesome/fontawesome-free or @fortawesome/fontawesome-pro but it's disabled for the @fortawesome/fontawesome-svg-core.
This method is useful when you're loading @fortawesome/fontawesome-svg-core, but would still like to leverage automatic DOM watching.
Params
Calling dom.watch() without params is equivalent to calling with the following params:
"Marty, you're not thinking fourth-dimensionally!"
The abstract value is mostly useful for library / framework / tooling creators. It provides a data structure that can easily be converted into other objects.
Using a transform:
icon(faPlus,{transform:{size:8,// starts at 16 so make it halfx:-4,// the same as left-4y:6,// the same as up-6rotate:90,// the same as rotate-90flipX:true,// the same as flip-hflipY:true// the same as flip-v}}).html
More than meets the eye...
If you need help figuring out transforms, see parse.transform.
Use the main icon as a mask for another another icon:
Takes an icon string, an object, or an array and returns an icon definition.
What is it?
The parse.icon() method will allow the user to input an icon's name (or alias) as a string, an object, or an array when calling an icon. See our Vue docs for an example.
The parse.icon() method also normalizes our styles and icon names. For example, you can reference our solid icons with with a prefix of 'solid', 'fa-solid', 'fas', or 'fa'.
Additionally, you can reference our icons with just the icon name, which will default to solid style.
How to Use
Referencing the icon as a string:
import{ parse }from'@fortawesome/fontawesome-svg-core'// the icon's class and style will default to "solid"
parse.icon('dog')// returns an object, with a default class of `solid` or `fas`// {prefix: 'fas', iconName: 'dog'}
The above code is the same as doing the following:
import{ parse }from'@fortawesome/fontawesome-svg-core'// the icon's class and style is set to "solid"
parse.icon({prefix:'fas',iconName:'dog'})// returns an object, with a class of `solid` or `fas`// {prefix: 'fas', iconName: 'dog'}
Referencing the icon as an object with style of 'fa-solid':
When calling the icons, if a style (solid, thin, duotone, etc.) is not specified or there is not a styleDefault set, the icon's class and style will default to solid.
Prefixes and Style Classes
Like the number of our icons, our styles have grown too! We now have icons in six styles. The chart below outlines all of our styles along with how you can use them with Font Awesome Icons:
Style
Style Class
Brand
fab, fa-brands, brands
Duotone
fad, fa-duotone, duotone
Light
fal, fa-light, light
Regular
far, fa-regular, regular
Solid
fa, fas, fa-solid, solid
Thin
fat, fa-thin, thin
Read more about our basic styling or how aliases can be used in conjunction with the styling.
Advertisement
Remove ads with a Pro plan!
Using this requires Font Awesome Pro
Pro
A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.
And of course Pro-level plans come with…
All 16,150 Icons in Font Awesome
Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
A Perpetual License to Use Pro
Services and Tools to Make Easy Work of Using Icons
Convenience method to convert an abstract representation of a Font Awesome object into its corresponding HTML markup.
The icon(), text(), layer(), and counter() functions each return a Font Awesome object that has properties abstract and html. (See also the documentation for icon() more details about the shape of such objects.)
toHtml() can be used to transform any abstract element into HTML.
Advertisement
Remove ads with a Pro plan!
Using this requires Font Awesome Pro
Pro
A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.
And of course Pro-level plans come with…
All 16,150 Icons in Font Awesome
Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
A Perpetual License to Use Pro
Services and Tools to Make Easy Work of Using Icons