[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:

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.

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.