Web

Upgrade to Version 6

Whether you’re a FA n00b or an old pro, we've worked hard to make upgrading to Version 6 as smooth and easy as possible. Learn more about what's changed and how to update your project.

Advertisement

What's new about Version 6?

We've packed a lot into Font Awesome 6 including:

Jump into the Deets on Version 6 Changes

Upgrade from Version 5 When Using a Kit

If you're using a Kit, upgrading to Version 6 should be fa-rabbit-running-fast.

  1. Head to your Kit's settings.
  2. Select Version 6 from the "Versions" menu.
  3. Save that settings change.
  4. Grab yourself a coffee with all that time you just saved.

Backward Compatible by Default!

If your project uses Version 5 icons, style names, or custom CSS rules with Font Awesome @font-face rules, your Kit will automatically update icons to use Version 6!

Upgrade Your Kit

Upgrade from Version 5 When Self-Hosting

If you are currently hosting Font Awesome 5 yourself or installed Font Awesome using a package, you'll need to swap out and disconnect the old Version 5 files, then place and hook up the new Version 6 files in your project.

1. Locate and remove Any Version 5 Files From Your Project

Loading two different versions of Font Awesome may cause conflicts, so you’ll need to find the location of the old files and remove them.

Finding the location of the Version 5 files depends on how you installed Font Awesome. Here are a couple of examples of possible project set-ups:

Find the fontawesome files in your project directories:

project_root
|__assets
    |__fontawesome

Example installed with npm

project_root
|__node_modules
    |[email protected]
        |__version_5_files

You can safely delete any of old version files since you'll be replacing them with the new Version 6 files in the next step.

2. Download and Install Version 6

Next, download Version 6 and unpack the files and icons, or update your Font Awesome packages/components to Version 6, depending on what works best for your project.

Download and place into your project:

Or Update Packages and Components:

3. Update Version 5 References to Point to Version 6 Files

You've removed the old Version 5 icons and files and added in the new Version 6 icons and files, and now you need to update your old Version 5 references to point to the new Version assets you've added.

For projects with HTML templates, you'll need to edit the script or CSS links in the head of your templates

Here is an example of adding the Version 6 SVG + JS files:

  <head>
    <!-- all.js loads all styles and icons + include all v5 backwards compatibility by default -->
    <script defer src="/your_path_to_version_6_files/js/all.js"></script>
  </head>
  <body>
    <!-- Your icons should show up just as before -->
  </body>

And here is an example of adding the Version 6 Web Fonts + CSS files:

  <head>
    <!-- all.css loads all styles and icons  + include all v5 backwards compatibility by default -->
    <link href="/your_path_to_version_6_files/css/all.css" rel="stylesheet">
  </head>
  <body>
    <!-- Your icons should show up just as before -->
  </body>

You may also want to only load some styles:

  <head>
    <!-- Add the base CSS plus Solid + Brands styles -->
    <link href="/your_path_to_version_6_files/css/fontawesome.css" rel="stylesheet">
    <link href="/your_path_to_version_6_files/css/brands.css" rel="stylesheet">
    <link href="/your_path_to_version_6_files/css/solid.css" rel="stylesheet">

    <!-- update existing v5 CSS to use v6 icons and assets -->
    <link href="/your-path-to-fontawesome/css/v5-font-face.css" rel="stylesheet" />
  </head>
  <body>
    <!-- Your icons should show up just as before -->
  </body>

If You're Unable to Remove Font Awesome 5

If you can't remove a previous version of Font Awesome from your project (e.g. it's bundled in a theme or plugin you're using), it's important to make sure that you include the v6 files after those previous versions are included in the <head> of your project's HTML. This is extra important when including the v5-font-face.css utility.

  <head>
    <!-- Example: A theme's CSS that uses an older version of Font Awesome that can't be removed -->
    <link href="/your_path_to_theme_that_uses_version_5_files" rel="stylesheet" />
    
    <!-- Add the base CSS plus Solid + Brands styles **after previous versions** -->
    <link href="/your_path_to_version_6_files/css/fontawesome.css" rel="stylesheet">
    <link href="/your_path_to_version_6_files/css/brands.css" rel="stylesheet">
    <link href="/your_path_to_version_6_files/css/solid.css" rel="stylesheet">

    <!-- update existing v5 CSS to use v6 icons and assets **after previous versions** -->
    <link href="/your-path-to-fontawesome/css/v5-font-face.css" rel="stylesheet" />
  </head>
  <body>
    <!-- Your icons should show up and render using Font Awesome 6 -->
  </body>

Backward Compatibility When Hosting Yourself

We've included files to help make Font Awesome 6 easily backward compatible with older versions. Learn how you can easily get your Web Fonts or SVG project using v6 icons without touching a single <i> element or pseudo-element CSS rule.

Upgrading should be easy. But Downgrading could be difficult.

Version 6 has some new icons, styles, and styling goodies. Once you've started using them in your project, downgrading to Version 5 may result in missing icons and styling. If you do downgrade, make sure you remove anything that's Version 6 specific.

Advertisement

You're All Set!

Your project will now load Version 6 and render any existing icons using our newest and freshest icons and options. Are you running into trouble? Check out our troubleshooting guide for answers to common questions about using Font Awesome on the Web.

You might want to go check out the big pile of new icons we've added in Version 6 (including the new Thin style!) or check out all of Version 6's new styling options.

Upgrade from Version 4

Need to upgrade from Version 4 to Version 6? We've written a custom guide just for you. Check out the v4 upgrading instructions here.