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.
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 |
--fa-inverse | Set color of an inverted icon | Any valid CSS color value |
Sizing Icons
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
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 |
CSS Custom Property | Details | Accepted Values |
---|
--fa-li-margin | Set margin around icon | Any valid CSS margin value |
--fa-li-width | Set width of icon | Any valid CSS width value |
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 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 |
Animating Icons
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 |
--fa-animation-direction | Set direction for animation | Any valid CSS animation-direction value |
--fa-animation-duration | Set duration for animation | Any valid CSS animation-duration value |
--fa-animation-iteration-count | Set number of iterations for animation | Any valid CSS animation-iteration-count value |
--fa-animation-timing | Set how the animation progresses through frames | Any valid CSS animation-timing-function value |
--fa-beat-scale | Set the max value an fa-beat icon will scale | Any valid CSS number value |
--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 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 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 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 |
Bordered Icons
Class | Details |
---|
fa-border | Creates a border with border-radius and padding applied around an icon |
CSS Custom Property | Details | Accepted Values |
---|
--fa-border-color | Set border color | Any valid CSS border-color value |
--fa-border-padding | Set padding around icon | Any valid CSS padding value |
--fa-border-radius | Set border radius | Any valid CSS border-radius value |
--fa-border-style | Set border style | Any valid CSS border-style value |
--fa-border-width | Set border width | Any valid CSS border-width value |
Pulled Icons
Class | Details |
---|
fa-pull-left | Pulls an icon by floating it left and applying a margin-right |
fa-pull-right | Pulls an icon by floating it right and applying a margin-left |
CSS Custom Property | Details | Accepted Values |
---|
--fa-pull-margin | Set margin around icon | Any valid CSS margin value |
Stacking Icons
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 |
CSS Custom Property | Details | Accepted Values |
---|
--fa-stack-z-index | Set z-index of a stacked icon | Any valid CSS z-index value |
--fa-inverse | Set color of an inverted stacked icon | Any valid CSS color value |
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 |
--fa-primary-opacity | Set primary layer opacity | 0 1.0 |
--fa-secondary-color | Set secondary layer color | Any valid CSS color value |
--fa-secondary-opacity | Set secondary layer opacity | 0 1.0 |
Accessibility
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
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 |
--fa-font-sharp-duotone-solid | Sets the font property to use the sharp-duotone solid style (font-family and font-weight ) in pseudo-element custom CSS rules |