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(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:
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 family table below).
/* Step 1: Common Properties: All required to make icons render reliably */.icon::before{display: inline-block;text-rendering: auto;-webkit-font-smoothing: antialiased;}/* Step 2: Reference Individual Icons */.login::before{font:var(--fa-font-solid);content:"\f007";}/* Note: Make sure to include the correct weight and Unicode value for the icon */.tps::before{font:var(--fa-font-solid);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
Remove ads with a Pro plan!
Using this requires Font Awesome Pro
Pro
A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.
And of course Pro-level plans come with…
All 16,083 Icons in Font Awesome
Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
A Perpetual License to Use Pro
Services and Tools to Make Easy Work of Using 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 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.
Add styling to elements that will contain the pseudo-element to support positioning.
Set the font to the CSS Custom Property, add the necessary font-style resets, 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. 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: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;}/* 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";}
Advertisement
Remove ads with a Pro plan!
Using this requires Font Awesome Pro
Pro
A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.
And of course Pro-level plans come with…
All 16,083 Icons in Font Awesome
Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
A Perpetual License to Use Pro
Services and Tools to Make Easy Work of Using Icons
Using our @include fa-icon-mixin utilities, you can add icons with custom pseudo-element CSS easily. These mixins handle the basic rendering that we bundle in our toolkit to make sure icons display perfectly. Along with that, they define the correct icon style to render an icon.
/* Solid style of user */.user {@includefa-icon-solid($fa-var-user);}/* Duotone style of camera-retro */.camera-retro {@includefa-icon-duotone($fa-var-camera-retro);}/* Twitter brand icon */.twitter {@includefa-icon-brands($fa-var-twitter);}
Using our .fa-icon-mixin utilities, you can add icons with custom pseudo-element CSS easily. These mixins handle the basic rendering that we bundle in our toolkit to make sure icons display perfectly. Along with that, they define the correct icon style to render an icon.
/* Solid style of user */.user{.fa-icon-solid(@fa-var-user);}/* Duotone style of camera-retro */.camera-retro{.fa-icon-duotone(@fa-var-camera-retro);}/* Twitter brand icon */.twitter{.fa-icon-brands(@fa-var-twitter);}
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.
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><aclass="ninety-four"href="https://en.wikipedia.org/wiki/Blink_element">Hey, do you remember the blink tag?</a>