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(opens new window) . 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-user to show icons in your site. Let's duplicate the functionality of these classes and write our own.
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
::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. You may find our cheatsheet handy for finding and copying those values.
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
::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 Awesome 5 Duotone, the
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.
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:
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.
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:
Support for Dynamic Changes
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.