Let's run through how to upgrade to Version 6 when rendering icons using CSS Pseudo-elements.
To help with backward compatibility, we've made a few important changes to how Font Awesome supports working with Pseudo-elements.
- We now recommend defining the CSS
font properties using our provided CSS Custom Properties. This will help make upgrading to future versions even easier.
- We've made sure that Version 4 and Version 5 icon unicode values map to the proper icon in Version 6.
- We now include a
@font-face shim in our Web Fonts version of Font Awesome by default. This shim handles pointing to the proper Version 6 Web Font files for you.
You'll want to make sure your Pseudo-element CSS rules are referencing Font Awesome 6 assets. As such, double-check that you've updated your kit's settings, hosted assets, managed packages, or plugins/components to use Font Awesome 6
Backward Compatibilty with Older Versions
As part of our backward compatibility features, Font Awesome 6 now includes
@font-face shims to map v4/v5 unicode values to their v6 counterparts — any existing Version 5 Pseudo-element rules should automatically translate to render Version 6 icons.
These are included and automatically loaded in Version 6-based kits. If you are hosting Web Fonts or SVG-based files yourself, check out how and when to include them manually.
And remember to make sure your custom CSS rules include the correct weight and Unicode value for each icon.
Updating Font Rule Syntax
By completing this optional step, you can ensure that your Pseudo-element custom CSS is current and bulletproof for future upgrades. A Version 5 Pseudo-element definition looked like this.
We've moved a lot of complexity, such as the
font-centric common properties as well as
font-weight into our provided CSS Custom Properties. Let's change the above custom CSS to use Version 6's syntax. We'll do the following:
- Remove any
font-minded properties from the common properties rule
- Use custom properties-based
font value to define an icon's style