Upgrade CSS Pseudo-elements

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

Before you update your pseudo element code using the steps below, make sure you’ve updated your assets to Version 7 for the method you’re using to load Font Awesome.

Update Any Old V6 Font Rules

There are some syntax changes to how to add an icon as a pseudo-element, so if you have any direct font references to “Font Awesome 6 Pro”, “Font Awesome 6 Free”, or other font-family declarations in your CSS, you will want to update those to use our CSS custom properties.

Here are a few examples:

/* On General Icon Rules */
.icon::before {
  /* replace any code like this:

  font-family: "Font Awesome 6 Pro";
  font-weight: 900;

  with the font rule below for the icon style you want to use */
  font: var(--fa-font-solid);
}

.icon::before {
  /* replace any code like this:

  font-family: "Font Awesome 6 Free";
  font-weight: 900;

  with the font rule below for the icon style you want to use */
  font: var(--fa-font-solid);
}

/* On Individual Icon References */
.login::before {
  /* replace any code like this:

  font-family: "Font Awesome 6 Pro";
  font-weight: 900;

  with the font rule below for the icon style you want to use */
  font: var(--fa-font-solid);
  content: '\f090';
}

.home::before {
  /* replace any code like this:

  font-family: "Font Awesome 6 Sharp";
  font-weight: 100;

  with the font rule below for the icon style you want to use */
  font: var(--fa-font-sharp-thin);
  content: '\f015';
}

---

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.