CSS Pseudo-elements

Let’s run through how to upgrade to Version 6 when rendering icons using CSS Pseudo-elements.

What’s Changed

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.

Upgrading

Update Assets

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.

/* Old Version 5 CSS - Common properties to render all icons */
.icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Old Version 5 CSS - For referencing individual icons */
.login::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f007';
}

.tps::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
  content: '\f1ea';
}

We’ve moved a lot of complexity, such as the font-centric common properties as well as font-family and 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:

1. Remove any font-minded properties from the common properties rule
2. Use custom properties-based font value to define an icon’s style

/* New Simplified Version 6 CSS */
/* Step 1: Common Properties: All required to make icons render reliably */
.icon::before {
  /* removed font- based rules */
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Step 2: Reference Individual Icons */
.login::before {
  /* using style CSS custom property */
  font: var(--fa-font-solid);
  content: '\f007';
}

/* Note: Make sure to include the correct weight and Unicode value for the icon */
.tps::before {
  /* using style CSS custom property */
  font: var(--fa-font-solid);
  content: '\f1ea';
}

---

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 Sharp Family and Thin Style, or check out all of Version 6's new styling options.