Styling with Font Awesome

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.

Basic Font Awesome default 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 spinners

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