Skip to content

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.

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.
StyleAvailability@font-face weight@font-face font-family
SolidFree Plan900Font Awesome 5 Free or Font Awesome 5 Pro (for pro users)
RegularPro only400Font Awesome 5 Pro
LightPro only300Font Awesome 5 Pro
DuotonePro only900Font Awesome 5 Duotone
BrandsFree Plan400Font Awesome 5 Brands
Uploaded IconsPro only400Font 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";
}

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>

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.