Styling with Font Awesome

Font Awesome has a ton of great styling tools for the web 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 Out-of-the-box styling

Size Make icons bigger or smaller

Fixed-width Make icons the same width for alignment

Icons in a List Use icons as list bullets

Rotate Shift icons around an axis

Animate Add motion to your icons

Border + Pull Bring icons inline with text

Stack Stack two icons to make a new one

SVG+JS Only Power Transform Fine-tuned rotation, sizing, and positioning

SVG+JS Only Mask Combine icons with transparency

SVG+JS Only Layer Combine two icons without transparency

SVG+JS Only 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