Styling Basics

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

Before You Get Started

Make sure you’re:

• Set up with Font Awesome in your project.
• Familiar with the basics of adding Font Awesome icons.

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>

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.