Upgrade from Older Versions

Are you using an older version of Font Awesome on a project and ready to upgrade? We’ve tried to make it as straightforward and easy as possible to upgrade to Version 7.

What’s Changed?

There are some significant differences between older versions such as Font Awesome 4 or 5 and Font Awesome 7.

Icon Packs, Families, and Styles

Version 4 and below had just one style of icons. Version 5 introduced multiple styles of icons. But since then we’ve organized things by Icon Packs, Families, and Styles to give a lot more choice to match your project’s visual tone and feel.

Similarly, all Font Awesome 4 icons with an outlined style (their name usually ended with -o) are now part of the Classic Regular style, use the fa-classic fa-regular style class, and have had their -o suffix removed.

Icon Syntax

The syntax for how icons are referenced in HTML is now different - separate classes are used to define family and style as well as an individual icon.

Icon Naming

A lot of icons have gone through name changes in recent versions (especially since version 4). We made aliases for the old names that will translate to the new names if you don’t want to update your icon references.

<!-- Version 4's syntax -->
<i class="fa fa-user"></i>

<!-- Version 5's syntax -->
<i class="fas fa-user"></i>

<!-- Version 7's syntax -->
<i class="fa-classic fa-solid fa-user"></i>

<!-- example: duotone family + classic style of user -->
<i class="fa-duotone fa-solid fa-user"></i>

<!-- example: sharp family+  solid style of user -->
<i class="fa-sharp fa-solid fa-user"></i>

<!-- example: sharp duotone family + solid style of user -->
<i class="fa-sharp-duotone fa-solid fa-user"></i>

Browser Support

All modern web browsers are supported out of the box in Font Awesome 7. But it does not support older or deprecated browsers that older versions once did. Check out official browser support list to make sure your project needs are covered.

How to Upgrade from Older Versions

1. Locate and Remove Older Version Assets

Loading two different versions of Font Awesome may cause conflicts, so you’ll need to locate the old files and remove them before adding in Version 7 assets. Look for any folder containing Font Awesome assets like Web Fonts (/fontawesome/fonts/), CSS (/fontawesome/css), and pre-processor options (/fontawesome/less and /fontawesome/scss).

Next, remove the lines that include the older version’s CSS or JS from the <head> of your templates/pages’ HTML, including any that point to Version 4 or 5’s CDN.

Find the fontawesome files in your project directories:

project_root
|__assets
    |__fontawesome

2. Set Up Current Version & Assets

Use a Kit (Recommended)

We recommend using a Kit — It’s like a CDN just for you and it comes with older version compatibility automatically which lets you use our latest icons and software on projects without worrying about new syntax and names changes.

Other Methods

If you can’t use a Kit, you can choose one of the other ways to set up Font Awesome on the Web. To host the files yourself, follow the instructions for using hosting yourself that works best for your project:

If you don’t want to update all the icon references across your project, you can use our older version v*-shims.js files when using SVG + JS, And for Web Fonts, you can do the same with older version v*-font-face.css files.

You're all set!

Your project will now load Version 7 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.