Font Awesome Icons Displaying Squares

[quincyadam]

Hello: I’m using custom CSS to display some font awesome icons and they work, where others display a square. For example, content: “\f39e” (Facebook) will not work, but content: “\f2a0” (Phone) works. There’s not errors in the console. I see many threads from last year, but don’t see any fixes for this. Thoughts?

[ruenel]

Hey @quincyadam,

Thanks for posting in!

The phone is working because it has been added in the theme. The icon is included in Font Awesome 5.0.0.
The Facebook icon on the other hand has been changed and updated in 5.8.2.

• https://fontawesome.com/icons/phone?style=solid
• https://fontawesome.com/icons/facebook-f?style=brands

The common font icons is added in one single font file.The brand font icons on the other were also added into one single file.

It is best that you use our icon shortcodes or use the icon html code like this:

<i class="x-icon-facebook" data-x-icon-b="&#xf082;" aria-hidden="true"></i>

Or simply update your custom css from:

.social .li:before {
    content: "\f082";
    font-family: "FontAwesome";
}

into this:

.social .li:before {
    content: "\f082";
    font-family: "FontAwesomeBrands";
}

Hope this helps. Please let us know how it goes.

[quincyadam]

Worked perfectly. Thanks!

[Prasant]

Glad to hear that.