Style Cheatsheet
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-family |
Set Font Awesome icon family | Any valid Font Awesome family's font-family |
--fa-style |
Set Font Awesome icon style | Any valid Font Awesome style's font-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 |
Icon Canvas + Widths
| Class | Details |
|---|---|
fa-width-auto |
Set the width of an icon only their symbol and not the entire Icon Canvas |
| CSS Custom Property | Details | Accepted Values |
|---|---|---|
--fa-width |
Set the width of an icon | Any valid CSS width value |
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 inline-size 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-start |
Pulls an icon by assigning a float value of inline-start and applying a margin-inline-end |
fa-pull-end |
Pulls an icon by assigning a float value of inline-end and applying a margin-inline-start |
| 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 |
Power Transforms
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 classic family and solid style (font-family and font-weight) in pseudo-element custom CSS rules |
--fa-font-regular |
Sets the font property to use the classic family and regular style (font-family and font-weight) in pseudo-element custom CSS rules |
--fa-font-light |
Sets the font property to use the classic family and light style (font-family and font-weight) in pseudo-element custom CSS rules |
--fa-font-thin |
Sets the font property to use the classic family and thin style (font-family and font-weight) in pseudo-element custom CSS rules |
--fa-font-duotone |
Sets the font property to use the duotone family and solid style (font-family and font-weight) in pseudo-element custom CSS rules |
--fa-font-duotone-regular |
Sets the font property to use the duotone family and regular style (font-family and font-weight) in pseudo-element custom CSS rules |
--fa-font-duotone-light |
Sets the font property to use the duotone family and light style (font-family and font-weight) in pseudo-element custom CSS rules |
--fa-font-duotone-thin |
Sets the font property to use the duotone family and thin style (font-family and font-weight) in pseudo-element custom CSS rules |
--fa-font-brands |
Sets the font property to use the brands family and regular style (font-family and font-weight) in pseudo-element custom CSS rules |
--fa-font-sharp-solid |
Sets the font property to use the sharp family 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 family 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 family 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 family 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 family and solid style (font-family and font-weight) in pseudo-element custom CSS rules |
--fa-font-sharp-duotone-regular |
Sets the font property to use the sharp-duotone family and regular style (font-family and font-weight) in pseudo-element custom CSS rules |
--fa-font-sharp-duotone-light |
Sets the font property to use the sharp-duotone family and light style (font-family and font-weight) in pseudo-element custom CSS rules |
--fa-font-sharp-duotone-thin |
Sets the font property to use the sharp-duotone family and thin style (font-family and font-weight) in pseudo-element custom CSS rules |