CSS Pseudo-elements

When changing the HTML on your project is not an option, we can leverage a feature of CSS to add icons to a page. CSS has a powerful feature known as Pseudo-elements. Font Awesome has leveraged the ::before pseudo-element to add icons to a page since the very beginning.

Heads up! We changed the unicode values of some of the icons!

In version 5.12.0 we began to use unicode codepoints that fell outside of the defined Private Use Area (PUA). We’ve corrected this in Version 5.14.0. If you are using icons that were released in 5.12 or 5.13, you’ll want to update your unicode values.

Working with pseudo-elements is not for the faint of heart nor front-end development!

Referencing icons using pseudo- elements is more complicated and prone to errors than the standard way of dropping an <i> element into your HTML. This option works best for folks who can’t control the final markup of their project.

How They Work

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.

  <style>
    .icon::before {
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
    }

    .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";
    }

    .twitter::before {
      font-family: "Font Awesome 5 Brands"; content: "\f099";
    }
  </style>

  <ul style="margin: 0;">
    <li><span class="icon login"></span> Login</li>
    <li><span class="icon tps"></span> TPS Reports</li>
    <li><span class="icon twitter"></span> Twitter</li>
  </ul>

---

How to Define an Icon Using CSS Pseudo-elements

Define Common CSS for All Icons

Firstly, there are some common CSS properties that apply to all icons. It’s best to get this out of the way first in your CSS so that your icon definitions become simple.

Reference Individual Icons

There are four important parts to include when referencing any individual icon:

1. Set the pseudo-element to match either the ::before or ::after you used in the previous common set up step.
2. Set the font-family to the right family for the icons you want to use (see family table below).
3. Set the font-weight to the right weight for the style you want to use (see style table).
4. Set the content to the Unicode value of one of our icons. You may find our cheatsheet handy for finding and copying those values.

Style	Availability	@font-face weight	@font-face font-family
Solid	Free Plan	900	Font Awesome 5 Free or Font Awesome 5 Pro (for pro users)
Regular	Pro only	400	Font Awesome 5 Pro
Light	Pro only	300	Font Awesome 5 Pro
Duotone	Pro only	900	Font Awesome 5 Duotone
Brands	Free Plan	400	Font Awesome 5 Brands
Uploaded Icons	Pro only	400	Font Awesome Kit

  /* Step 1: Common Properties: All required to make icons render reliably */
  .icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

  /* Step 2: Reference Individual Icons */
  .login::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f007";
  }

  /* Note: Make sure to include the correct weight and Unicode value for the icon */
  .tps::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    content: "\f1ea";
  }

See It 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.

Using CSS Pseudo-elements with Duotone Icons

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

Define Common CSS for Duotone Icons

There are shared CSS properties, which are unique to the duotone style, that all duotone icons will need. Again, it’s best to get this out of the way first in your CSS so that your icon definitions become simple.

1. Add styling to element that will contain the pseudo-element to support positioning.
2. Set the font-family to Font Awesome 5 Duotone, the font-weight to 900, and add positioning styles for the pseudo-element.
3. Set the default opacity levels and colors for each layer of the duotone icon.

Reference Individual Icon’s Layers

Referencing individual duotone icons works much like all CSS pseudo-element icon use. Set the content to the Unicode value of one of our icons.

  /* Step 1: Common Duotone 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-family and font-weight for this style */
  .icon-duotone::before,
  .icon-duotone::after {
    font-family: "Font Awesome 5 Duotone";
    font-weight: 900;

    /* 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;
  }

  /* 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.0);
  }

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

  /* Step 4: Reference Individual Icon's Layers */
  .icon-login::before {
    content: "\f007";
  }

  .icon-login::after {
    content: "\10f007";
  }

---

Using 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’ 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 {
          display: none;
        }

        .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";
        }
      </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.

---

Using CSS Pseudo-elements with Uploaded Icons

You can add your uploaded icons to your designs using pseudo-elements, but you’ll need to take a couple of different steps.

Get the Unicode Value

Go to the Uploaded Icons page of your kit, open up the details of the icon you want to use, and copy the unicode value.

Reference the Unicode and Kit Font Family

Set the font to font-family: "Font Awesome Kit" and use that unicode in your CSS along with the regular settings for using Font Awesome pseudo-elements, like this:

  /* Step 1: Common Properties: All required to make icons render reliably */
  .icon::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

  /* Step 2: Reference Individual Icons */
  .custom-icon::before {
    font-family: "Font Awesome Kit";
    content: "\e001"; /* change to your icon's unicode value */
    /* font-weight isn't needed */
  }

Support for Dynamic Changes

Let’s get a little cute with it by using some JavaScript and jQuery to toggle the class of an element.

  <script>
    setInterval(function () {
      $('.ninety-four').toggleClass('arrow')
    }, 1000)
  </script>

  <style>
    .ninety-four::after {
      margin-left: 0.25em;
      font-size: 2em;
      vertical-align: middle;
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      content: "\f0c8";
    }

    .ninety-four.arrow::after {
      content: "\f152";
    }
  </style>

  <a class="ninety-four" href="https://en.wikipedia.org/wiki/Blink_element">Hey, do you remember the blink tag?</a>

Upgrading a Project Using Pseudo-elements and Version 4

If you’ve used Pseudo-elements and Version 4 in a project and are looking to upgrade, we strongly recommend using a kit to host and serve Font Awesome 5.

We’ve added a Version 4 Compatibility feature for use right out of the box, err, kit. This feature will help map your Version 4 Unicode references to the proper Version 5 ones. If you have CSS that hard codes Version 4’s font-family name, this auto-update will make sure all of those cases use the current version of Font Awesome from your kit.