[Solved]: Font Awesome unicodes via CSS ‘content ’ not working

  John Mwaniki /    Updated on 07 Jul 2024

Have trouble showing Font Awesome icons on your website by using their unicodes as the value for the CSS content property? The icons don't show at all or square shapes are displayed in their place?

This is a common scenario. In this article, we explore the different possible causes for this, and their solutions.

Before we cover the possible causes that are specific to unicodes and CSS method, I recommend that you first make sure:

  • Font Awesome is loaded properly in your pages in which you want to show icons.
  • You are trying to show icons that are supported by the Font Awesome version loaded.
  • You are not trying to use premium/Pro icons while using the free Font Awesome version.

Here is an article I wrote on how to fix when Font Awesome icons are not showing that shows how to fix the above in detail.

If you have already observed all the above, then check below the possible causes:

Error adding the unicode in CSS

The Font Awesome unicode is added as the value to the CSS content property within quotes(single or double) and escaped with a backslash \. Don't confuse with a forward slash.

Also note that the content must be within the CSS pseudo-elements ::before or ::after.

Example

The unicode for the solid user icon is f007.


selector::after{
    content: "\f007";
}

Missing or incorrect font-family

Make sure you have added the font-family property.

Use "FontAwesome" as the font value for version 4.

For version 5 and 6 use the values from the table below:

Style Version 5 Version 6
Solid Font Awesome 5 Free or Font Awesome 5 Pro (for pro users) Font Awesome 6 Free or Font Awesome 6 Pro (for pro users)
Regular Font Awesome 5 Pro Font Awesome 6 Pro
Light Font Awesome 5 Pro Font Awesome 6 Pro
Thin Not available Font Awesome 6 Pro
Duotone Font Awesome 5 Duotone Font Awesome 6 Duotone
Brands Font Awesome 5 Brands Font Awesome 6 Brands

Example


selector::after{
    content: "\f007";
    font-family: "Font Awesome 5 Free";
}

Missing font-weight property

Make sure you add the font-weight property, or else some icons won't show.

Below are the font-weight values to use for various icon styles in Font Awesome version 5 and 6.

Style Version 5 Version 6
Solid 900 900
Regular 400 400
Light 300 300
Thin Not available 100
Duotone 900 900
Brands 400 400

Example


selector::after{
    content: "\f007";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

Always make sure the icon unicodes are added correctly in the content property, and font-family and font-weight properties are used and with the correct values. With these fixes, your Font Awesome icons should show perfectly with no problems.

It's my hope that through this article you found the answer to your problem.