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 Compatible by Default!
@font-face shim as well as the mapping we've done from v4/v5 to v6 unicode values that we include by default in Version 6, any existing Version 5 Pseudo-element rules should automatically translate to render Version 6 icons!
Just 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