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="fas fa-camera"></i>
  </span>

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

  <span style="font-size: 3rem;">
    <span style="color: Mediumslateblue;">
    <i class="fas 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.

You're viewing the Version 6 Beta

It's all the awesome of 5, but now more six-y! Version 6 brings over 13,000 icons across 5 styles – including the new Thin style! – and includes more and faster services.

Get the Deets on Version 6

Head Back to Our Current Version 5 Release

Need a Hand?

If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

Or get Real Human Support™ with a Pro Subscription!