Version 6 Alpha Docs 1.0 Add Icons

Add Icons Using 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 when using Font Awesome Web Fonts.

This is not for the Faint of Heart nor Front End Development

Manually referencing icons this way is more complicated and prone to errors than the standard way of dropping an extra i element into your markup. So take a pause and consider if this is really worth it. We find this the best option for folks who can't control the final markup of their site/project as well as those ninjas who want complete control over their markup.

# 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 the very beginning.

# 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 6 Free"; font-weight: 900; content: "\f007";
  }

  .tps::before {
    font-family: "Font Awesome 6 Free"; font-weight: 400; content: "\f1ea";
  }

  .twitter::before {
    font-family: "Font Awesome 6 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:

Set the pseudo-element to match either the ::before or ::after you used in the previous common set up step.
Set the font-family to the right family for the icons you want to use (see family table below).
Set the font-weight to the right weight for the style you want to use (see style table).
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 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.

Add styling to element that will contain the pseudo-element to support positioning.
Set the font-family to Font Awesome 6 Duotone, the font-weight to 900, and add positioning styles for the pseudo-element.
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 6 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 Pseudo-elements with 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;
  }
}

# Using Pseudo-elements with 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);
  }
}

# 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 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="https://use.fontawesome.com/releases/latest/js/all.js" integrity="sha384-L469/ELG4Bg9sDQbl0hvjMq8pOcqFgkSpwhwnslzvVVGpDjYJ6wJJyYjvG3u8XW7" crossorigin="anonymous"></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 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>