Font Awesome has a ton of great styling tools that work hand-in-hand with our icons to really make your project look its best.
Many of the styles can be combined to get even more effects, though some are only available when using our SVG+JS method.
Basics
Font Awesome default styling
Size
Make icons bigger or smaller
Fixed-width
Make icons the same width for alignment
- Done!
- Not done
- Maybe?
Icons in a List
Use icons as list bullets
Rotate
Shift icons around an axis
Animate
Add motion to spinners
Gatsby believed in the green light, the orgastic future that year by year recedes before us...
Border + Pull
Bring icons inline with text
Stack
Stack two icons to make a new one
Power Transform
Fine-tuned rotation, sizing, and positioning
Mask
Combine icons with transparency
Layer
Combine two icons without transparency
Add Text or Counters
Add a layer of text or a counter to an icon
Duotone
The power of duotone icons to the max
Customize
Make it Your Own