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.
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
1. 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. You can make it a separate rule or include the styling in every individual icon rule (in the next step).
/* Step 1: Common Properties
These styles are required to make icons render reliably */
.icon::before {
display: inline-block;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
2. Reference Individual Icons
There are a few important items to include when referencing any individual icon:
- Set the pseudo-element to match either the
::beforeor::afteryou used in the previous common set up step. - Set the
fontCSS property to the correct CSS custom property (see family table below). But note that Duotones need special treatment. - Set the content to the Unicode value of one of our icons.
/* Step 1: Common Properties: All required to make icons render reliably - we did this above but it's included here for the full demo */
.icon::before {
display: inline-block;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
/* Step 2: Reference Individual Icons */
/* Note: Make sure to include the correct weight and Unicode value for the icon */
/* an example rule targeting any element with the "account" class to render fa-user icon in the Solid style */
.account::before {
font: var(--fa-font-solid);
content: "\f007";
}
/* an example rule targeting any element with the "warning" class to render fa-triangle-exclamation icon in the Regular style */
.warning::before {
font: var(--fa-font-regular);
content: "\f071";
}
/* an example rule targeting any element with the "updates" class to render fa-newspaper icon in the Light style */
.updates::before {
font: var(--fa-font-light);
content: "\f1ea";
}
/* an example rule targeting any element with the "contact" class to render fa-message icon in the Thin style */
.updates::before {
font: var(--fa-font-thin);
content: "\f27a";
}
/* an example rule targeting any element with the "delete" class to render fa-trash icon in the Sharp Solid style */
.delete::before {
font: var(--fa-font-sharp-solid);
content: "\f1f8";
}
/* an example rule targeting any element with the "add" class to render fa-circle-plus icon in the Sharp Regular style */
.add::before {
font: var(--fa-font-sharp-regular);
content: "\f055";
}
/* an example rule targeting any element with the "gaming" class to render fa-discord Brand icon */
.gaming::before {
font: var(--fa-font-brands);
content: "\f392";
}
/* an example rule targeting any element with the "custom-icon" class to render a custom icon (uploaded to a kit) */
.custom-icon::before {
font-family: "Font Awesome Kit"; /* note that you need to use "font-family" for custom icons */
content: "\[CUSTOM_ICON_UNICODE]"; /* replace with custom icon's unicode value */
}
Here's a handy chart of the font styles/weights you can use:
| Style | Availability | @font-face font-family | @font-face weight | CSS Custom Property |
|---|---|---|---|---|
| Brands | Free Plan | Font Awesome 6 Free or Font Awesome 6 Pro for Pro users | 400 | --fa-font-brands |
| Solid | Free Plan | Font Awesome 6 Free or Font Awesome 6 Pro for Pro users | 900 | --fa-font-solid |
| Regular | Pro only | Font Awesome 6 Pro | 400 | --fa-font-regular |
| Light | Pro only | Font Awesome 6 Pro | 300 | --fa-font-light |
| Thin | Pro only | Font Awesome 6 Pro | 100 | --fa-font-thin |
| Sharp Solid | Pro only | Font Awesome 6 Sharp | 900 | --fa-font-sharp-solid |
| Sharp Regular | Pro only | Font Awesome 6 Sharp | 400 | --fa-font-sharp-regular |
| Sharp Light | Pro only | Font Awesome 6 Sharp | 300 | --fa-font-sharp-light |
| Custom Icons | Pro Kits only | Font Awesome Kit | - | - |
Duotone is a special case which we've covered below in CSS Pseudo-elements and Duotone.
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.
1. 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
fontto 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.
/* 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);
}
2. 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 door-open, you would have \f52b for the primary layer and \f52b\f52b for the secondary layer.
/* Step 4: Reference an individual icon's layers using unicodes */
/* This rule renders the primary duotone for the door-open icon */
.icon-login::before {
content: "\f52b";
}
/* This rule renders the secondary duotone for the door-open icon */
.icon-login::after {
content: "\f52b\f52b";
}
Pseudo-elements and Sass (SCSS)
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 {
@include fa-icon-solid($fa-var-user);
}
// Regular style of triangle-exclamation
.triangle-exclamation {
@include fa-icon-regular($fa-var-triangle-exclamation);
}
// Light style of newspaper
.newspaper {
@include fa-icon-light($fa-var-newspaper);
}
// Thin style of paintbrush-fine
.paintbrush-fine {
@include fa-icon-thin($fa-var-paintbrush-fine);
}
// Duotone style of camera-retro
.camera-retro {
@include fa-icon-duotone($fa-var-camera-retro);
}
// Twitter brand icon
.twitter {
@include fa-icon-brands($fa-var-twitter);
}
// Sharp Solid style of trash
.trash {
@include fa-icon-solid($fa-var-trash);
@include fa-family-sharp(); // define Sharp family
}
// Sharp Regular style of trash
.trash {
@include fa-icon-regular($fa-var-trash);
@include fa-family-sharp(); // define Sharp family
}
// Classic Solid style of trash
.trash {
@include fa-icon-solid($fa-var-trash);
@include fa-family-classic(); // explicity setting Classic family (optional since this is Font Awesome's default)
}
If you'd rather define these style rules manually, that's an option as well.
Font Awesome Sharp Requires an Extra Mixin
If you're using our mixins to render an icon in our Sharp family of styles, you'll need to reference the @include fa-family-sharp mixin along with the @include fa-icon- mixin.
Pseudo-elements and Less
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);
}
// Regular style of triangle-exclamation
.triangle-exclamation {
.fa-icon-regular(@fa-var-triangle-exclamation);
}
// Light style of newspaper
.newspaper {
.fa-icon-light(@fa-var-newspaper);
}
// Thin style of paintbrush-fine
.paintbrush-fine {
.fa-icon-thin(@fa-var-paintbrush-fine);
}
// Duotone style of camera-retro
.camera-retro {
.fa-icon-duotone(@fa-var-camera-retro);
}
// Twitter brand icon
.twitter {
.fa-icon-brands(@fa-var-twitter);
}
// Sharp Solid style of trash
.trash {
.fa-icon-solid(@fa-var-trash);
.fa-family-sharp(); // define Sharp family
}
// Sharp Regular style of trash
.trash {
.fa-icon-regular(@fa-var-trash);
.fa-family-sharp(); // define Sharp family
}
// Classic Solid style of trash
.trash {
.fa-icon-solid(@fa-var-trash);
.fa-family-classic(); // explicity setting Classic family (optional since this is Font Awesome's default)
}
If you'd rather define these style rules manually, that's an option as well.
Font Awesome Sharp Requires an Extra Mixin
If you're using our mixins to render an icon in our Sharp family of styles, you'll need to reference the .fa-family-sharp mixin along with the .fa-icon- mixin.
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: var(--fa-font-solid);
content: "\f007";
}
.tps::before {
font: var(--fa-font-solid);
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>
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>