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

Before You Get Started

Before adding icons as pseudo-elements, make sure you’ve added Font Awesome into your project. You can set up with a Kit or host the Web Fonts yourself.

1. Define Common CSS for All Icons

Once you’ve added Font Awesome into your project, 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.

/* Step 1: Basic styling for all icons
  These styles are required to make icons render reliably */
.icon::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

2. 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 an icon’s details.

There are a few important items to include when referencing any individual icon:

• Set the pseudo-element to match either the ::before or ::after you used in the previous common set up step.
• Set the font CSS property to the correct CSS custom property (see the Family and Styles Cheat Sheet below). But note that Duotones need special treatment.
• Set the content to the Unicode value of one of our icons.

Leave 'fa-' to Font Awesome

We don’t recommend creating your own classes that start with fa- as it can result in missing icons or other unwanted behavior. You can add any other custom classes to your elements though!

/* Step 1: Basic styling for all icons - we did this in the first step above but it's included here for the full demo */
.icon::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Step 2: Reference Individual Icons */
/* Make sure to include the correct font declaration and unicode value for the icon you want to add */

/* any HTML element with the "ghost" class will render fa-ghost icon in the Classic Solid style */
.ghost::before {
  /* Set the font to Solid */
  font: var(--fa-font-solid);
  /* Set the Unicode value for the "fa-ghost" icon */
  content: '\f6e2';
}

/* any HTML element with the "delete" class will render fa-trash icon in the Sharp Solid style */
.delete::before {
  /* Set the font to Sharp Solid */
  font: var(--fa-font-sharp-solid);
  /* Set the Unicode value for the "fa-trash" icon */
  content: '\f1f8';
}

/* any HTML element with the "custom-icon" class to render a custom icon (uploaded to a Kit) */
.custom-icon::before {
  font-family: 'Font Awesome Kit'; /* note that you need to use "font-family" for custom icons */
  content: '\[CUSTOM*ICON_UNICODE]'; /* replace with custom icon's unicode value \*/
}

And here’s the HTML would look like to render those icons:

<span class="icon ghost">I ain't afraid!</span>
<span class="icon delete">Trash it... Or recycle!</span>
<span class="icon custom-icon">Something so special!</span>

See CSS Pseudo-elements in Action!

Need a more hands-on example of how to do this? Here’s a Codepen demo showing how to render icons of all styles via CSS Pseudo-elements with our Web Fonts-based Framework.

If You Can Only Make Changes Using CSS

Sometimes you only have access to a project’s CSS, but not its HTML. 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 to match the HTML and then use the declarations to set the icon like we used above:

#user-settings .delete::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font: var(--fa-font-sharp-solid);
  content: '\f1f8';
}

CSS Pseudo-elements and Duotone

Using CSS pseudo-elements to render any duotone icons (like from 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.

1. Define Common CSS for Duotone Icons

There are shared CSS properties unique to the Duotone and Sharp Duotone styles that all duotone icons will need. Again, it’s best to set up a shared CSS rule for all duotone icons first to simplify your individual icon definitions.

1. Add styling to elements that will contain the pseudo-element to support positioning.
2. Set the font to the CSS Custom Property, add the necessary font-style resets, and add positioning styles for the pseudo-element.
3. Set the default opacity levels and colors for each layer of the duotone icon.

/* Step 1: Common Duotone positioning properties: All required to make icons render reliably */
.icon-duotone {
  position: relative;
  padding-left: 1.25em; /* make space for the width of the absolutely positioned icon */
}

/* Step 2: Set the font styles for Duotone */
.icon-duotone::before,
.icon-duotone::after {
  font: var(--fa-font-duotone);

  /* include the basic Font Awesome font style settings if you haven't already */
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;

  /* position both layers of the icon to the left, set our fixed-width width, horizontally center layers, and then vertically align them so they flex with different line heights */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25em;
  text-align: center;
}

.custom-icon-duotone::before,
.custom-icon-duotone::after {
  /* note that you need to use "font-family" and "font weight" for custom icons */
  font-family: 'Font Awesome Kit Duotone';
  font-weight: 400;
}

/* Step 3: Set the default opacity levels and colors for each layer */
.icon-duotone::before {
  color: var(--fa-primary-color, inherit);
  opacity: 1;
  opacity: var(--fa-primary-opacity, 1);
}

.icon-duotone::after {
  color: var(--fa-secondary-color, inherit);
  opacity: var(--fa-secondary-opacity, 0.4);
}

If you’re using Sharp Duotone icons, you use the same CSS rules, except you change the font to font: var(--fa-font-sharp-duotone);.

2. Reference Individual Icon’s Layers

Referencing individual duotone icons works much like other CSS pseudo-element icons. Set the content to the unicode value of one of our icons. For Duotone icons, you will have two values — one for each duotone layer. For door-open, you would have \f52b for the primary layer and \f52b\f52b for the secondary layer.

/* Step 4: Reference an individual icon's layers using unicodes */
/* This rule renders the primary duotone for the door-open icon */
.icon-login::before {
  content: '\f52b';
}

/* This rule renders the secondary duotone for the door-open icon */
.icon-login::after {
  content: '\f52b\f52b';
}

.custom-icon-duotone::before {
  content: '\[CUSTOM*ICON_UNICODE]'; /* replace with custom icon's unicode value \*/
}

.custom-icon-duotone::after {
  content: '\[CUSTOM*ICON_UNICODE]\[CUSTOM_ICON_UNICODE]'; /* replace with custom icon's unicode value, twice \*/
}

And here’s the HTML would look like to render those icons:

  <button class="icon-duotone icon-login">Login</button>

See Duotone CSS Pseudo-elements in Action!

Need a more hands-on example of how to do this? Here’s a Codepen demo showing how to render icons of all styles via CSS Pseudo-elements with our Web Fonts-based Framework.

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	Pro only	Font Awesome Duotone	900	--fa-font-duotone
Sharp Duotone Solid	Pro only	Font Awesome 6 Sharp Duotone	900	--fa-font-sharp-duotone-solid
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 data-search-pseudo-elements attribute to the <script> element that calls the main fontawesome.js file.

It might look something like this:

<html>
  <head>
    <title>My Project</title>

    <!-- include the core fontawesome.js file -->
    <script data-search-pseudo-elements defer src="/your-path-to-fontawesome/js/fontawesome.js"></script>

  </head>

This tells our script to look for pseudo-elements when identifying elements to turn into icons.

Set Pseudo-elements Display to “none”

Since our JS will find each pseudo-element icon reference 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>

    <!-- include the core fontawesome.js file -->
    <script data-search-pseudo-elements defer src="/your-path-to-fontawesome/js/fontawesome.js"></script>

    <!-- include the files for any icon styles you plan to use in your project -->
    <script defer src="/your-path-to-fontawesome/js/solid.js"></script>
    <script defer src="/your-path-to-fontawesome/js/brands.js"></script>

    <style>
      /* Hide the CSS pseudo element */
      .icon::before {
        display: none;
      }


      /* Reference individual icons you want to show in your project */
      .login::before {
        /* Select the style you want the icon in */
        font: var(--fa-font-solid);
        /* Add the unicode for the specific icon you want to add - in this case it's the fa-user icon */
        content: '\f007';
      }

      /* Another example, this one is the fa-newspaper icon in the Sharp Solid style */
      .tps::before {
        font: var(--fa-font-sharp-solid);
        content: '\f1ea';
      }
    </style>
  </head>
  <body>
    <ul style="margin: 0;">
      <li><span class="icon login"></span> Login</li>
      <li><span class="icon tps"></span> TPS Reports</li>
    </ul>
  </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.

CSS Pseudo-elements with Sass or Less

Interested in using Font Awesome icons as pseudo-elements in Sass/SCSS or Less? We’ve got you covered:

• Add Icons as Pseudo-elements with Sass/SCSS
• Add Icons as Pseudo-elements with Less

---

Related Topics

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