Quick Start

Need to get icons in your web project quickly? Here's the fastest and easiest way to use Font Awesome in your web-based projects (keep in mind you can use Font Awesome in lots of other ways, including on the desktop).

We'll cover the basics of setting up Font Awesome and finding that perfect icon for your project. This video will walk you through the steps below.

1. Setup Font Awesome in Your Project

Font Awesome Kits are the easiest way to get Font Awesome icons into your projects. Just create a new Font Awesome Kit and add the Kit embed code to the head of each template or page of your project where you want to add icons.

<script src="https://kit.fontawesome.com/YOUR_KIT_CODE.js" crossorigin="anonymous"></script>

Replace YOUR_KIT_CODE with the unique code from your Kit's page.

Set up a Kit

2. Find and Add Icons

Browse thousands of icons to find some icons you like and then add the icon name and style as CSS classes to an HTML <i> tag.

<body>
  <!-- solid style -->
  <i class="fa-solid fa-user"></i>

  <!-- regular style -->
  <i class="fa-regular fa-user"></i>

  <!-- light style -->
  <i class="fa-light fa-user"></i>

  <!-- thin style -->
  <i class="fa-thin fa-user"></i>

  <!-- duotone style -->
  <i class="fa-duotone fa-solid fa-user"></i>

  <!-- sharp solid style -->
  <i class="fa-sharp fa-solid fa-user"></i>

  <!-- sharp duotone style -->
  <i class="fa-sharp-duotone fa-solid fa-user"></i>

  <!-- whiteboard style -->
  <i class="fa-2x fa-whiteboard fa-semibold fa-user"></i>

  <!-- jelly-duo style -->
  <i class="fa-2x fa-jelly-duo fa-regular fa-user"></i>

  <!-- brand icon-->
  <i class="fa-brands fa-github-square"></i>
</body>

Some Styles Require a Pro or Pro+ Subscription

Remember that some styles and icons are only available for our Pro or Pro+ subscribers

3. Make It Awesome

Now you're ready to Rock and Roll! Take it to 11 by adding some style.

See All the Styling Options

Hit a Snag?

Double-Check Your Code

If your <i> tags aren't turning into icons, make sure you've got the Kit embed code on the pages or templates you're working with.

Get More Help

Check out the troubleshooting section to get answers to some common hiccups.

Other Ways to Use Font Awesome

Looking for other ways to use Font Awesome? We've got 'em!

Use Font Awesome with Your Preferred Syntax or Stack…

    No results