When changing the HTML on your project is not an option, you can make use of a CSS feature to add icons to a page when using Font Awesome Web Fonts.

Advertisement

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.

About Pseudo Elements

CSS has a powerful feature known as Pseudo-elements (opens new window) 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

Define Common CSS for All Icons

First, you'll need to add some common CSS properties that apply to all icons. It's best to get this out of the way first to simplify your individual icon CSS.

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.
Style Availability @font-face weight @font-face font-family
Solid Free Plan 900 Font Awesome 6 Free or
Font Awesome 6 Pro for Pro users
Regular Pro Plan Required 400 Font Awesome 6 Pro
Light Pro Plan Required 300 Font Awesome 6 Pro
Thin Pro Plan Required 100 Font Awesome 6 Pro
Duotone Pro Plan Required 900 Font Awesome 6 Duotone
Brands Free Plan 400 Font Awesome 6 Brands
  /* 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 6 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 6 Free";
    font-weight: 400;
    content: "\f1ea";
  }

See CSS Pseudo Elements in Action!

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

Advertisement

CSS Pseudo-elements and Duotone

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 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 to simplify your icon definitions.

  1. Add styling to elements that will contain the pseudo-element to support positioning.
  2. Set the font-family to Font Awesome 6 Duotone, the font-weight to 900, 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.

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. For Duotone icons, you will have two values — one for each duotone layer. For citrus-slice, you would have \e2f5 for the primary layer and \e2f5\e2f5 for the secondary layer.

  /* 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-family: "Font Awesome 6 Duotone";
    font-weight: 900;

    /* include the basic Font Awesome font style settings if you haven't already */
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    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;
  }

  /* 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 an individual icon's layers using unicodes */
  .icon-login::before {
    content: "\f090";
  }

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

Fixed! Browser Inconsistencies with Pseudo-Element Duotone Icons

In Beta 1, there was an issue that affected some of our duotone icons where one layer might be missing. In the Beta 2 release, this has been fixed so you can once again copy the unicode aliases from the v6 icon details to use in your CSS pseudo-elements.

Advertisement

Pseudo-elements and Less

You can use the Less variables to tap into Font Awesome.

/* import the styles you want to use */
@import "./fontawesome/less/solid";
@import "./fontawesome/less/brands";

/* use icon name variables to add icons using pseudo elements */
/* for a solid style icon */
.user {
  .fa-icon;
  .fa-solid;

  &:before {
    content: @fa-var-user;
  }
}

/* for a brand icon */
.twitter {
  .fa-icon;
  .fa-brands;

  &:before {
    content: @fa-var-twitter;
  }
}

Pseudo-elements and Sass

You can use the Sass @extends with variables to tap into Font Awesome.

/* import the styles you want to use */
@import "./fontawesome/scss/solid.scss";
@import "./fontawesome/scss/brands.scss";

/* use icon name variables to add icons using pseudo elements */
/* for a solid style icon */
.user {
  @extend %fa-icon;
  @extend .fa-solid;

  &:before {
    content: fa-content($fa-var-user);
  }
}

/* for a brand icon */
.twitter {
  @extend %fa-icon;
  @extend .fa-brands;

  &:before {
    content: fa-content($fa-var-twitter);
  }
}
Advertisement

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

        .login::before {
          font-family: "Font Awesome 6 Free";
          font-weight: 900;
          content: "\f007";
        }

        .tps::before {
          font-family: "Font Awesome 6 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 (opens new window) showing how to render icons via CSS Pseudo-elements with our SVG + JS Framework.

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 6 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>

Learn More

You're viewing the Version 6 Beta

It's all the awesome of 5, but now more six-y! Version 6 brings over 13,000 icons across 5 styles – including the new Thin style! – and includes more and faster services.

Get the Deets on Version 6

Head Back to Our Current Version 5 Release

Need a Hand?

If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

Or get Real Human Support™ with a Pro Subscription!