Are you using Font Awesome 4 on a project and ready to upgrade? Version 5 has been re-written and re-designed completely from scratch. We've tried to keep things as similar as possible to version 4, but there are a few differences to keep in mind when upgrading. Here's how to move to the latest and greatest.
Advertisement
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
All 7,864 icons in Font Awesome
5 Classic styles of every icon
3 Sharp styles of every icon
A Perpetual License to use Pro
Services and tools to make easy work of using icons
Our Kits come with version 4 compatibility included - which manages the toughest parts of upgrading for you automatically. Create a kit, add its Kit embed code to your project, and we'll take care of the following:
Your project may still have CSS that references the old font-family name, a common scenario when your project depends on other themes or plugins that load their own, older versions of Font Awesome. If we find any of those, we’ll override them to use the newer version of Font Awesome you’ve configured. This will also guarantee that any CSS pseudo-element rules you've set use the proper icon.
What's Changed From Version 4 to 5?
3 Different Icon Styles
We introduced a solid, regular, and light style of every icon in Font Awesome. We also separated out brand icons into their own style/category for easier use. We needed a way to reference a particular style when an icon is called in markup. It's still the case that for each icon you want to use, you need to 1) specify the icon's name and 2) use the proper prefix. Version 4 just had one prefix — fa. Version 5 has four prefixes to let us set the style of any icon easily:
Remove the files associated with Font Awesome Version 4 from your project - including the fontawesome/ folder that contains web fonts (fontawesome/fonts/), CSS (fontawesome/css), and pre-processor options (fontawesome/less and fontawesome/scss). If you’re using version 4's CDN(opens new window), you can skip this step.
Next, remove references to version 4's CSS or JS from the <head> of your templates/pages' HTML, including any references to version 4's CDN(opens new window).
Need some extra help and assurance that your existing icons will render without issue? We’ve created shim files to use as band-aids until you get the time to do a proper upgrade. Our v4 shims allow you to keep your old version 4 icon names, aliases, and syntax while mapping version 5 icons to your current references.
If you want to use them, you'll need to add an additional line to your Version 5 references. Here's an example using version 5's CDN:
<head><linkrel="stylesheet"href="path_to_css_files/css/all.css"><linkrel="stylesheet"href="path_to_css_files/css/v4-shims.css"></head><body><!-- "close" is an alias to "xmark", Version 6 is <i class="fa fa-xmark"></i> --><iclass="fa fa-close"></i><!-- Renamed to "image", V5 is <i class="fa fa-image"></i> --><iclass="fa fa-picture"></i><!-- Needs the "fab" prefix, V5 <i class="fab fa-twitter"></i> --><iclass="fa fa-twitter"></i><!-- "far" prefix, lose the "-o", V5 <i class="far fa-circle"></i> --><iclass="fa fa-circle-o"></i></body>
The v4-shim is available to use in both our Web Fonts + CSS and SVG + JS Frameworks. If you're using our new and fancy SVG + JS way of rendering icons, just switch the /css/all.css reference to /js/all.js as well as /css/v4-shims.css to /js/v4-shims.js. Here's the example above switched to use our SVG + JS framework instead.
<head><scriptdefersrc="https://path_to_js_files/js/all.js"></script><scriptdefersrc="https://path_to_js_files/js/v4-shims.js"></script></head><body><!-- your existing Version 4 icon references here... --></body>
Buy a friend a coffee and have them go through your project’s pages and views to make sure all icons are rendering as expected. Also, a staging or development version of your project is a great place to do this.
Don't cross streams!
After conferring with Dr. Spengler, we don't recommend using both Font Awesome 4 and 6 side-by-side on a project. It will cause huge CSS and path collisions, and we can't promise icons will render as you or we expect. If you can't remove older version references, we recommend starting a new project for testing the beta or waiting until version 6 is fully released.
6. Update CSS Pseudo-element Rules
If you're using CSS pseudo-elements with version 4, upgrading to version 5 requires a fair amount of manual work. Below are the steps you'll need to follow:
Update the font-family value - You'll want to make sure you change the font-family to reference the new version of Font Awesome 5.
Here's the list of all of the icons that have been renamed according to version 5's standards and conventions. Keep in mind you'll need to change all brand icons from version 4 to use the new fab prefix instead of the old fa prefix.