Basic Use

You can place Font Awesome icons just about anywhere using a style prefix and the icon’s name. We’ve tried to make it so that icons take on the characteristics and appear alongside text naturally.

Font Awesome is designed to be used with inline elements, and we recommend sticking with a consistent HTML element to reference them by in your project. We like the <i> tag for brevity and because most folks use <em></em> for emphasized/italicized semantic text these days. If that’s not your cup of tea, using a <span> is more semantically correct.

To reference an icon, you need to know two bits of information. **1) its name, prefixed with fa- (meaning “font awesome” naturally!) and 2) the style you want to use’s corresponding prefix.

  <!-- this icon's 1) style prefix == fas and 2) icon name == camera -->
  <i class="fas fa-camera"></i>

  <!-- using an <i> element to reference the icon -->
  <i class="fas fa-camera"></i>

  <!-- using a <span> element to reference the icon -->
  <span class="fas fa-camera"></span>

Style	Availability	Style Prefix	Example
Solid	Free	`fas`	`<i class="fas fa-camera"></i>`
Regular	Pro only	`far`	`<i class="far fa-camera"></i>`
Light	Pro only	`fal`	`<i class="fal fa-camera"></i>`
Duotone	Pro only	`fad`	`<i class="fad fa-camera"></i>`
Brands	Free	`fab`	`<i class="fab fa-font-awesome"></i>`

Since Font Awesome was first implemented and continues to support being rendered using the CSS @font-face method, each of its styles corresponds to a particular font weight:

Style	Availability	@font-face weight
Solid	Free Plan	900
Regular	Pro Plan Required	400
Light	Pro Plan Required	300
Duotone	Pro Plan Required	900
Brands	Free Plan	400

Font Awesome Icons + Your Project’s Styling

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>

Additional Styling Options

While the basic way to reference an icon is simple and hopefully straight-forward, we’ve provided support-level styling for things like sizing icons, aligning and listing icons, as well as rotating and transforming icons.

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.

We recommend targeting icons in your CSS in couple of different ways.

Styling Case	Recommended Selector
Custom styling all icons	Add a consistent custom class to all icons (e.g. `.icon`, `.[projectprefix]-icon`, or `.fa-icon`) You can also use style classes that match your in-use icon styles `.fas { ... }` `.far { ... }` `.fal { ... }` `.fad { ... }` `.fab { ... }`
Custom styling a specific icon	Use the individual icon name, prefixed with `.fa-` `.fa-user { ... }` `.fa-font-awesome { ... }`

Here’s a quick example of using those selectors to add custom color to Font Awesome icons:

  <head>
    <!-- reference your copy Font Awesome here (from our CDN or by hosting yourself) -->
    <link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet">
    <link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet">
    <link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet">
    <style type="text/css">
      <!-- custom styling for all icons -->
      i.fas,
      i.fab {
        border: 1px solid red;
      }

      <!-- custom styling for specific icons -->
      .fa-fish {
        color: salmon;
      }

      .fa-frog {
        color: green;
      }

      .fa-user-ninja.vanished {
        opacity: 0.0;
      }

      .fa-facebook {
        color: rgb(59, 91, 152);
      }
    </style>
  </head>
  <body>
    <i class="fas fa-fish"></i>
    <i class="fas fa-frog"></i>
    <i class="fas fa-user-ninja vanished"></i>
    <i class="fab fa-facebook"></i>
  </body>