Don't Miss Out! To celebrate the release of Font Awesome Sharp, get $20 off a new Pro subscription for a limited time!

Just drop an icon into your project and you'll find it blends right in with its surroundings.

Advertisement

Before You Get Started

Make sure you're:

Font Awesome icons automatically inherit CSS size and color (as seen in the examples below). This means they blend in with text inline wherever you put them. Font Awesome tries not to be too opinionated, and sets just the basic styling rules icons needed to render properly in context.

  <span style="font-size: 3em; color: Tomato;">
    <i class="fa-solid fa-camera"></i>
  </span>

  <span style="font-size: 48px; color: Dodgerblue;">
    <i class="fa-solid fa-camera"></i>
  </span>

  <span style="font-size: 3rem;">
    <span style="color: Mediumslateblue;">
    <i class="fa-solid fa-camera"></i>
    </span>
  </span>
Advertisement

Additional Styling Options

While getting icons into your project is straight-forward, we've also provided additional styling utilities for things like sizing icons, aligning and using icons in a list, as well as rotating, transforming, and animating icons to let you make your icons awesome.

You can also add your own custom styling to Font Awesome icons by adding your own CSS rules in your project's code. Everything you can normally control with CSS is up for grabs - from color to display to alignment.