Font Awesome Icon on Pseudo element using CSS not showing

[stevenburles]

Hi,

I am using the following code to display a font awesome icon but it won’t display, please can you help?

#element::after {
content: ‘\e0ee’;
font-family: “Font Awesome Kit”;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
display: inline-block;
clear: both;
color: rgb(59, 188, 160);
position: absolute;
top: 15px;
left: 78px;
}

Thanks

[marc_a]

Hey @stevenburles,

Thanks for reaching out!

Please make sure that you are targeting the correct ID of your font awesome icon. It would also be best if you could share with us the page URL where the font awesome icon is located so that we can also troubleshoot it.

Hope that helps.

[stevenburles]

Hi @marc_a ,

I’ve setup a test page for you to look at.

Just incase you can’t find the icon I’m trying to use it’s - https://fontawesome.com/icons/circle-1?f=classic&s=solid

Thanks

[prakash_s]

Hello @stevenburles,

I checked your given icon of FontAwesome icon it seems that you are trying to insert the FontAwesome version 6 icon through the custom CSS. Please note that the current version of our theme supports FontAwesome version 5 just because the FontAwesome icon is not displaying properly. I would request you, please stay tuned for succeeding theme updates where the FontAwesome version 6 will be available.

Thanks for understanding