CSS Pseudo-elements

When changing the HTML on your project is not an option, or you’d rather write your own CSS, you can make use of CSS pseudo-elements to add icons to a page when using Font Awesome Web Fonts.

Working with Pseudo-elements is Not for the Faint of fa-heart.

Referencing icons using pseudo-elements is more complicated and prone to errors than the standard way of dropping an <i> element into your HTML.

Make sure you have a firm understanding of CSS and are willing to learn about some of the underpinnings that make Font Awesome work.

About Pseudo-elements

CSS has a powerful feature known as pseudo-elements that lets you visually add content to the page with just CSS. Font Awesome has leveraged the ::before pseudo-element to add icons to a page since Font Awesome was just a youngin.

We’ve already learned that Font Awesome uses classes like fa and fa-user to show icons in your site. Let’s duplicate the functionality of these classes and write our own using CSS pseudo-elements.

Add an Icon Using CSS Pseudo-elements

1. Load the Correct Web Font

First, you’ll need to load the web font to apply to all icons. For example, if you want to use the Classic Solid you’ll either need the solid.css file provided in your download, or make sure you’re loading the web font through your own @font-face rule:

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../webfonts/fa-solid-900.woff2");
}

Make sure the url for the web font points to where you stored them!

If you’re using the provided stylesheet, this @font-face rule will already be there, plus some handy custom properties to help you apply the web font:

:root, :host {
  --fa-style-family-classic: 'Font Awesome 6 Free';
  --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free';
}

Note that if you wish to use any other style, for example Sharp Solid, you only have to load its stylesheet: sharp-solid.css. Or if you’re setting up your own @font-face, change its rules to point to the correct web font.

With the web font in place, let’s put it to work!

2. Define Common CSS for All Icons

There is some CSS that needs to be applied to all icons, so we can make one generic rule for those. This will take care of setting the correct web font-related values, and make sure your icons will render properly.

.icon::before {
  /* Set the font for this icon style */
  font-family: 'Font Awesome 6 Free';
  /* Set the weight for this icon style */
  font-weight: 900;
  /* Make sure icons render pixel-perfect */
  -webkit-font-smoothing: antialiased;
}

If you’re using the Font Awesome supplied stylesheets (e.g. solid.css from above), you can use our utility custom properties that set both font-family and font-weight. Here’s the prior example updated to use the custom property for Classic Solid:

.icon::before {
  /* Set the font and weight for this icon style */
  font: var(--fa-font-solid);
  /* Make sure icons render pixel-perfect */
  -webkit-font-smoothing: antialiased;
}

Get inspired by our CSS!

We are setting more icon-related CSS in our core file, fontawesome.css. You might not need all of what we do there, but take a look if you’re running into edge cases or want your implementation to be as close as possible as the original!

3. Reference Individual Icons

With the web font and the common CSS in place, it’s time to add icons!

To reference an icon, add an individual icon’s unique Unicode value to your custom CSS. You can find an icon’s Unicode value in amongst our icons’ details.

With the Unicode value found, you can add it to your recently-written custom CSS in one of two ways:

.icon::before {
  /* Set the font for this icon style */
  font-family: 'Font Awesome 6 Free';
  /* Set the weight for this icon style */
  font-weight: 900;
  /* Make sure icons render pixel-perfect */
  -webkit-font-smoothing: antialiased;
  /* Set the Unicode value for the "fa-ghost" icon */
  content: '\f6e2';
}

And then you can reference this updated CSS rule in your HTML like so:

<span class="icon">I ain't afraid!</span>

Or you can create an additional dedicated class for each icon you want to reference:

.ghost::before {
  /* Set the Unicode value for the "fa-ghost" icon */
  content: '\f6e2';
}

And apply it together with the icon class:

<span class="icon ghost">I ain't afraid!</span>

If You Can Only Make Changes Using CSS

Sometimes you only have access to a project’s CSS, but not its HTML. For example, when using a theme in a CMS like WordPress. In that case, you can use the same strategy, but instead of creating your own icon class, you use classes from the existing HTML.

Let’s say you want to add a trash icon to a delete button. The button has a class of delete and is inside a form with an ID of user-settings. You can use these to create a selector, and use that in place of icon from our examples above:

#user-settings .delete::before {
  /* Set the font for this icon style */
  font-family: 'Font Awesome 6 Free';
  /* Set the weight for this icon style */
  font-weight: 900;
  /* Make sure icons render pixel-perfect */
  -webkit-font-smoothing: antialiased;
  /* Set the Unicode value for the "fa-trash" icon */
  content: '\f1f8';
}

Or if you’re using the Font Awesome supplied stylesheets:

#user-settings .delete::before {
  /* Set the font and weight for this icon style */
  font: var(--fa-font-solid);
  /* Make sure icons render pixel-perfect */
  -webkit-font-smoothing: antialiased;
  /* Set the Unicode value for the "fa-trash" icon */
  content: '\f1f8';
}

CSS Pseudo-elements and Duotone

Using CSS pseudo-elements to render duotone icons (both the Duotone family icons and Sharp Duotone family icons) follows a similar setup, but requires the use of both the ::before and ::after pseudo-elements along with more styling setup.

First, we need to set the correct position on the element we’re setting the pseudo-elements of:

.icon {
  position: relative;
}

This will help us to position the two duotone layers in the pseudo-elements so they overlap perfectly. With that in place, we can re-use our styles from before to set up the common CSS, and add and extra selector so ::after gets the same treatment as ::before:

.icon::before,
.icon::after {
  /* Set the font for this icon style */
  font-family: 'Font Awesome 6 Free';
  /* Set the weight for this icon style */
  font-weight: 900;
  /* Make sure icons render pixel-perfect */
  -webkit-font-smoothing: antialiased;
}

Now all that remains is adding our desired icon, setting the color and opacity, and overlap them. We do this by adding a little more CSS for ::before and ::after:

.icon::before {
  /* Set the Unicode value for the "fa-camera-retro" icon for the first layer */
  content: '\f083';
  /* Set this layer's color */
  color: orangered;
}

.icon::after {
  /* Set the Unicode value for the "fa-camera-retro" icon twice for the second layer */
  content: '\f083\f083';
  /* Set this layer's color */
  color: black;
  /* Position this layer on top of the one in the ::before pseudo-element */
  position: absolute;
  left: 0;
}

Font Families and Styles Cheat Sheet

Here’s a handy chart of the font styles/weights you can use in your pseudo element CSS rules to define the family and style of icon you want to use.

Style	Availability	@font-face font-family	@font-face weight	CSS Custom Property
Brands	Free Plan	Font Awesome 6 Free or Font Awesome 6 Pro	400	--fa-font-brands
Classic Solid	Free Plan	Font Awesome 6 Free or Font Awesome 6 Pro	900	--fa-font-solid
Classic Regular	Pro only	Font Awesome 6 Pro	400	--fa-font-regular
Classic Light	Pro only	Font Awesome 6 Pro	300	--fa-font-light
Classic Thin	Pro only	Font Awesome 6 Pro	100	--fa-font-thin
Sharp Solid	Pro only	Font Awesome 6 Sharp	900	--fa-font-sharp-solid
Sharp Regular	Pro only	Font Awesome 6 Sharp	400	--fa-font-sharp-regular
Sharp Light	Pro only	Font Awesome 6 Sharp	300	--fa-font-sharp-light
Sharp Thin	Pro only	Font Awesome 6 Sharp	100	--fa-font-sharp-thin
Custom Icons	Pro Kits only	Font Awesome Kit	-	-

Duotone icons are a special case which we’ve covered in the CSS Pseudo-elements and Duotone section.

Style	Availability	@font-face font-family	@font-face weight	CSS Custom Property
Duotone Solid	Pro only	Font Awesome 6 Pro	900	--fa-font-duotone
Duotone Regular	Pro only	Font Awesome 6 Pro	400	--fa-font-duotone-regular
Duotone Light	Pro only	Font Awesome 6 Pro	300	--fa-font-duotone-light
Duotone Thin	Pro only	Font Awesome 6 Pro	100	--fa-font-duotone-thin
Sharp Duotone Solid	Pro only	Font Awesome 6 Sharp Duotone	900	--fa-font-sharp-duotone-solid
Sharp Duotone Regular	Pro only	Font Awesome 6 Sharp Duotone	400	--fa-font-sharp-duotone-regular
Sharp Duotone Light	Pro only	Font Awesome 6 Sharp Duotone	300	--fa-font-sharp-duotone-light
Sharp Duotone Thin	Pro only	Font Awesome 6 Sharp Duotone	100	--fa-font-sharp-duotone-thin
Custom Duotone Icons	Pro Kits only	Font Awesome Kit Duotone	-	-

CSS Pseudo-elements with Our SVG+JS Framework

If you’re using our SVG + JS framework to render icons, you need to do a few extra things:

Enable Pseudo-elements

Using CSS Pseudo-elements to render icons is disabled by default when using our SVG + JS Framework. You’ll need to add the <script data-search-pseudo-elements ... > attribute to the <script> element that calls Font Awesome.

Set Pseudo-elements to display to none

Since our JS will find each icon reference (using your pseudo-element styling) and insert an icon into your page’s DOM automatically, we’ll need to hide the real CSS-created pseudo-element that’s rendered.

<html>
  <head>
    <script data-search-pseudo-elements defer src="/your-path-to-fontawesome/js/all.js"></script>
    <style>
      .icon::before {
        /* Hide the Unicode character for the icon  */
        display: none;
      }
      .ghost::before {
        /* Leave these declarations, so the SVG + JS framework knows which icon to use */
        font: var(--fa-font-solid);
        content: '\f6e2';
      }
    </style>
  </head>
  <body>
    <span class="icon ghost">I ain't afraid!</span>
  </body>
</html>

See it in Action!

We know this can be tough to get. Here’s a Codepen demo showing how to render icons via CSS Pseudo-elements with our SVG + JS Framework.

---

Related Topics

Custom Icons and Pseudo-elements Use a Custom Icon as a CSS Pseudo-element with Webfont Kit Upload