Need to look up a specific CSS class or Custom Property? Forgot what a specific style utility class does? Here's a quick reference for everything included in Font Awesome's styling toolkit.
Advertisement
Remove ads with a Pro plan! A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with… All 30,013 icons in Font Awesome 5 Classic styles of every icon 4 Sharp styles of every icon A Perpetual License to use Pro Services and tools to make easy work of using icons Fresh icons, features, and software updates Plus support from real humans
Get Font Awesome Pro for only $99/yr
Already have a Pro Plan?
Sign in
General Class Details fa-inverse
Inverts the color of an icon to white
CSS Custom Property Details Accepted Values --fa-style-family
Set Font Awesome icon family "Font Awesome 6 Free"
"Font Awesome 6 Pro"
"Font Awesome 6 Duotone"
"Font Awesome 6 Brands"
"Font Awesome 6 Sharp"
--fa-style
Set Font Awesome icon style Any valid Font Awesome style weight --fa-display
Set display of an icon Any valid CSS display
value (opens new window) --fa-inverse
Set color of an inverted icon Any valid CSS color
value (opens new window)
Sizing Icons
Remove ads with a Pro plan! A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with… All 30,013 icons in Font Awesome 5 Classic styles of every icon 4 Sharp styles of every icon A Perpetual License to use Pro Services and tools to make easy work of using icons Fresh icons, features, and software updates Plus support from real humans
Get Font Awesome Pro for only $99/yr
Already have a Pro Plan?
Sign in
Class Details fa-1x
Changes an icon's font-size
to 1em fa-2x
Changes an icon's font-size
to 2em fa-3x
Changes an icon's font-size
to 3em fa-4x
Changes an icon's font-size
to 4em fa-5x
Changes an icon's font-size
to 5em fa-6x
Changes an icon's font-size
to 6em fa-7x
Changes an icon's font-size
to 7em fa-8x
Changes an icon's font-size
to 8em fa-9x
Changes an icon's font-size
to 9em fa-10x
Changes an icon's font-size
to 10em fa-2xs
Changes an icon's font-size
to 0.625em (~10px) and also vertically aligns icon fa-xs
Changes an icon's font-size
to .75em (~12px) and also vertically aligns icon fa-sm
Changes an icon's font-size
to 0.875em (~14px) and also vertically aligns icon fa-lg
Changes an icon's font-size
to 1.25em (~120px) and also vertically aligns icon fa-xl
Changes an icon's font-size
to 1.5em (~24px) and also vertically aligns icon fa-2xl
Changes an icon's font-size
to 2em (~32px) and also vertically aligns icon
Fixed-Width Icons
Class Details fa-fw
Changes an icon's font-size
to .75em
Icons in a List
Remove ads with a Pro plan! A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with… All 30,013 icons in Font Awesome 5 Classic styles of every icon 4 Sharp styles of every icon A Perpetual License to use Pro Services and tools to make easy work of using icons Fresh icons, features, and software updates Plus support from real humans
Get Font Awesome Pro for only $99/yr
Already have a Pro Plan?
Sign in
Class Details fa-ul
Used on a <ul>
or <ol>
elements to style icons as list bullets fa-li
Used on individual <li>
elements to style icons as list bullets
Rotating Icons
Class Details fa-rotate-90
Rotates an icon 90° fa-rotate-180
Rotates an icon 180° fa-rotate-270
Rotates an icon 270° fa-flip-horizontal
Mirrors an icon horizontally fa-flip-vertical
Mirrors an icon vertically fa-flip-both
Mirrors an icon both vertically and horizontally fa-rotate-by
Rotates an icon by a specific degree - setting an accompanying valid (opens new window) inline value for --fa-rotate-angle
is required
CSS Custom Property Details Accepted Values --fa-rotate-angle
Set rotation angle of.fa-rotate-by
Any valid CSS transform
rotate value (opens new window)
Animating Icons
Remove ads with a Pro plan! A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with… All 30,013 icons in Font Awesome 5 Classic styles of every icon 4 Sharp styles of every icon A Perpetual License to use Pro Services and tools to make easy work of using icons Fresh icons, features, and software updates Plus support from real humans
Get Font Awesome Pro for only $99/yr
Already have a Pro Plan?
Sign in
Class Details fa-spin
Makes an icon spin 360° clock-wise fa-spin-pulse
Makes an icon spin 360° clock-wise in 8 incremental steps fa-spin-reverse
When used in conjunction with fa-spin
or fa-spin-pulse
, makes an icon spin counter-clockwise fa-beat
Makes an icon scale up and down fa-fade
Makes an icon visually fade in and out using opacity
fa-flip
Makes an icon rotate about the Y axis
CSS Custom Property Details Accepted Values --fa-animation-delay
Set an initial delay for animation Any valid CSS animation-delay
value (opens new window) --fa-animation-direction
Set direction for animation Any valid CSS animation-direction
value (opens new window) --fa-animation-duration
Set duration for animation Any valid CSS animation-duration
value (opens new window) --fa-animation-iteration-count
Set number of iterations for animation Any valid CSS animation-iteration-count
value (opens new window) --fa-animation-timing
Set how the animation progresses through frames Any valid CSS animation-timing-function
value (opens new window) --fa-beat-scale
Set the max value an fa-beat
icon will scale Any valid CSS number value (opens new window) --fa-fade-opacity
Set lowest opacity value an fa-fade
icon will fade to 0
1.0
--fa-beat-fade-opacity
Set lowest opacity value an fa-beat-fade
icon will fade to and from 0
1.0
--fa-beat-fade-scale
Set max value that an icon will scale Set the max value an fa-beat-fade
icon will scale --fa-flip-x
Set an fa-flip
icon's x-coordinate of the vector denoting the axis of rotation Any valid CSS number
value (opens new window) between 0
and 1
--fa-flip-y
Set an fa-flip
icon'sy-coordinate of the vector denoting the axis of rotation Any valid CSS number
value (opens new window) between 0
and 1
--fa-flip-z
Set an fa-flip
icon's z-coordinate of the vector denoting the axis of rotation Any valid CSS number
value (opens new window) between 0
and 1
--fa-flip-angle
Set an fa-flip
icon's rotation angle. A positive angle denotes a clockwise rotation, a negative angle a counter-clockwise one. Any valid CSS angle value (opens new window)
Bordered Icons
Remove ads with a Pro plan! A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with… All 30,013 icons in Font Awesome 5 Classic styles of every icon 4 Sharp styles of every icon A Perpetual License to use Pro Services and tools to make easy work of using icons Fresh icons, features, and software updates Plus support from real humans
Get Font Awesome Pro for only $99/yr
Already have a Pro Plan?
Sign in
Class Details fa-border
Creates a border
with border-radius
and padding
applied around an icons
Pulled Icons
CSS Custom Property Details Accepted Values --fa-pull-margin
Set margin around icon Any valid CSS margin
value (opens new window)
Stacking Icons
Remove ads with a Pro plan! A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with… All 30,013 icons in Font Awesome 5 Classic styles of every icon 4 Sharp styles of every icon A Perpetual License to use Pro Services and tools to make easy work of using icons Fresh icons, features, and software updates Plus support from real humans
Get Font Awesome Pro for only $99/yr
Already have a Pro Plan?
Sign in
Class Details fa-stack
Used on a parent HTML element of the two icons to be stacked fa-stack-1x
Used on the icon which should be displayed at base size when stacked fa-stack-2x
Used on the icon which should be displayed larger when stacked fa-inverse
Inverts the color of the icon displayed at base size when stacked
Duotone Icons
Class Details fa-swap-opacity
Swap the default opacity of each layer in a duotone icon (making an icon's primary layer have the default opacity of 40% rather than its secondary layer)
CSS Custom Property Details Accepted Values --fa-primary-color
Set primary layer color Any valid CSS color
value (opens new window) --fa-primary-opacity
Set primary layer opacity 0
1.0
--fa-secondary-color
Set secondary layer color Any valid CSS color
value (opens new window) --fa-secondary-opacity
Set secondary layer opacity 0
1.0
Accessibility
Remove ads with a Pro plan! A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with… All 30,013 icons in Font Awesome 5 Classic styles of every icon 4 Sharp styles of every icon A Perpetual License to use Pro Services and tools to make easy work of using icons Fresh icons, features, and software updates Plus support from real humans
Get Font Awesome Pro for only $99/yr
Already have a Pro Plan?
Sign in
Class Details fa-sr-only
Visually hides an element containing a text-equivalent for an icon while keeping it accessible to assistive technologies fa-sr-only-focusable
Used alongside fa-sr-only
to show the element again when it’s focused (e.g. by a keyboard-only user)
Power Transforms are available only when using the SVG+JS framework . All grow, shrink, and positioning utilities accept arbitrary values (including decimals). Their units are 1/16em
each.
HTML data-
Attribute Details data-fa-transform="shrink-[value]"
Shrinks an icon data-fa-transform="grow-[value]"
Grows an icon data-fa-transform="up-[value]"
Moves an icon up data-fa-transform="right-[value]"
Moves an icon right data-fa-transform="down-[value]"
Moves an icon down data-fa-transform="left-[value]"
Moves an icon left data-fa-transform="rotate-[angle]"
rotates an icon by a specific degree (with negative numbers allowed) data-fa-transform="flip-h"
mirrors an icon horizontally data-fa-transform="flip-v"
mirrors icon vertically
Pseudo-elements
Remove ads with a Pro plan! A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with… All 30,013 icons in Font Awesome 5 Classic styles of every icon 4 Sharp styles of every icon A Perpetual License to use Pro Services and tools to make easy work of using icons Fresh icons, features, and software updates Plus support from real humans
Get Font Awesome Pro for only $99/yr
Already have a Pro Plan?
Sign in
CSS Custom Property Details --fa-font-solid
Sets the font
property to use the solid style (font-family
and font-weight
) in pseudo-element custom CSS rules --fa-font-regular
Sets the font
property to use the regular style (font-family
and font-weight
) in pseudo-element custom CSS rules --fa-font-light
Sets the font
property to use the solid style (font-family
and font-weight
) in pseudo-element custom CSS rules --fa-font-thin
Sets the font
property to use the thin style (font-family
and font-weight
) in pseudo-element custom CSS rules --fa-font-duotone
Sets the font
property to use the duotone style (font-family
and font-weight
) in pseudo-element custom CSS rules --fa-font-brands
Sets the font
property to use the brands style (font-family
and font-weight
) in pseudo-element custom CSS rules --fa-font-sharp-solid
Sets the font
property to use the sharp familiy and solid style (font-family
and font-weight
) in pseudo-element custom CSS rules --fa-font-sharp-regular
Sets the font
property to use the sharp familiy and regular style (font-family
and font-weight
) in pseudo-element custom CSS rules --fa-font-sharp-light
Sets the font
property to use the sharp familiy and light style (font-family
and font-weight
) in pseudo-element custom CSS rules --fa-font-sharp-thin
Sets the font
property to use the sharp familiy and thin style (font-family
and font-weight
) in pseudo-element custom CSS rules