- CSS Pseudo-elements
- Remove ads with a Pro plan!
- And of course Pro-level plans come with…
- Remove ads with a Pro plan!
- And of course Pro-level plans come with…
- Remove ads with a Pro plan!
- And of course Pro-level plans come with…
- How to Use font awesome icons as CSS content code
- Table of Contents
- Display font awesome icons using CSS Content Code & ::before pseudo-element
- Step 1: Load the font awesome CSS file.
- Step 2: Define the CSS class names for the icons
- Step 4: Set the icon font style
- Step 5: Add common styles to the icons
- Why to use font awesome CSS content Code & ::before ?
- Font awesome css content not working
- font awesome CSS content code StackBlitz Demo
CSS Pseudo-elements
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.
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
Get Font Awesome Pro for only $99/yr
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 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.
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
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
Get Font Awesome Pro for only $99/yr
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 ::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). 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.
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.
CSS Pseudo-elements and Duotone
Remove ads with a Pro plan!
A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.
And of course Pro-level plans come with…
Get Font Awesome Pro for only $99/yr
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 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.
/* 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)
How to Use font awesome icons as CSS content code
Using Pseudo-elements we can add content to the web page with just CSS.
Font awesome uses ::before pseudo-element to add icons to the page using their CSS content codes.
Table of Contents
Display font awesome icons using CSS Content Code & ::before pseudo-element
To use font awesome icons as CSS content code follow the below steps.
Step 1: Load the font awesome CSS file.
Add the font awesome CSS file in the tag of the page
I am using latest font awesome icon version 6.2.0.
Step 2: Define the CSS class names for the icons
We need to add unique class name to the icon element.
Go through the 2016 free font awesome icons, to get the CSS content code.
For all icons, unicode values are already defined.
/* Brand icon*/ .twitter::before < content: '\f099'; >/* Regular Icon */ .user::before < content: '\f007'; >/* Solid Icon */ .cloud::before
No icon will be displayed, because we need to add the font family.
Step 4: Set the icon font style
For each style of icons i.e., regular, solid and brand icons we have to set the appropriate font style.
In font awesome 6, there are predefined CSS custom properties.
We can use them to set the font style.
/* Brand icon*/ .twitter::before < content: '\f099'; font: var(--fa-font-brands); >/* Regular Icon */ .user::before < content: '\f007'; font: var(--fa-font-regular); >/* Solid Icon */ .cloud::before
The above CSS custom properties adds the font-family and font-weight properties to the icon.
/* Brand icon*/ .twitter::before < content: '\f099'; font-family: "Font Awesome 6 brands"; font-weight: 400; >/* Regular Icon */ .user::before < content: '\f007'; font-family: "Font Awesome 6 free"; font-weight: 400; >/* Solid Icon */ .cloud::before
CSS custom property | font-family | font-weight |
---|---|---|
—fa-font-brands | Font Awesome 6 brands | 400 |
—fa-font-solid | Font Awesome 6 free | 900 |
—fa-font-regular | Font Awesome 6 free | 400 |
And if you are using font awesome 5 version icons, use the following font-family and font-weight css styles.
There are no custom css properties defined in font awesome 5 version.
Icon Style | font-family | font-weight |
---|---|---|
brands | Font Awesome 5 brands | 400 |
solid | Font Awesome 5 free | 900 |
regular | Font Awesome 5 free | 400 |
Step 5: Add common styles to the icons
The above code displays the icons in default style.
If you want to add some custom styles to the icon add a common class to the icons.
Then add necessary styles, I am changing the color of icons to the red colour.
Why to use font awesome CSS content Code & ::before ?
The general practice is to display font awesome icons using their css class names & icon style class.
If you are starting a new project then it’s fine.
When font awesome icons project started people are using other existing icons.
Think about an existing project where icons are displayed using other class names.
The class name is different than font awesome icon i.e., fa-twitter .
Changing all icon class names in a project is difficult.
So font awesome used ::before pseudo-element to display icons using CSS content codes.
This way we can simple change the CSS styles for the icon elements no changes required in HTML pages.
I gave content as \f099 which is unicode value for twitter icon defined by font awesome icons.
Font awesome css content not working
If you follow the above steps, font awesome css content code should be working fine.
Otherwise you might see an empty square icon.
Remember two things while display font awesome icons using their CSS content code
As explained above if you are using font awesome 6 version icons use custom CSS properties .
And for the font awesome 5 version icons use font-family & font-weight .
/* Brand icon*/ .twitter::before < content: '\f099'; font-family: "Font Awesome 5 brands"; font-weight: 400; >/* Regular Icon */ .user::before < content: '\f007'; font-family: "Font Awesome 5 free"; font-weight: 400; >/* Solid Icon */ .cloud::before
If you are using pro icons you need to add font-family as “Font Awesome 5 Pro” or “Font Awesome 6 Pro”
font awesome CSS content code StackBlitz Demo
Here is the StackBlitz demo for font awesome CSS content code.