Avoid Blank Square FontAwesome 5 Icons when used as CSS Pseudo Elements

Are your FontAwesome 5 icons appearing as blank squares “□ □ □ □” ? Are the icons displaying on Desktop ok but not displaying on iOS Mobile Safari iPhones or iPads? – you need to tighten up your CSS rules in order for them to display correctly.

Add FontAwesome 5 CSS

First up is to call the correct FontAwesome CSS.

Add in the FontAwesome 5  CSS either via a wp_enqueue action or a CSS import.

So in your functions.php add …

wp_enqueue_style( 'font-awesome-free', '//use.fontawesome.com/releases/v5.15.3/css/all.css' );

or in your style.css add …

@import url("//use.fontawesome.com/releases/v5.15.3/css/all.css");

You can find out the latest FontAwesome 5 version here , you can either use the URL on cdnjs or amend the fontawesome version in the above url.

CSS Pseudo Elements

You need to ensure that the font-weight and font-family CSS selectors and values are properly declared. You need to know which if the three families you are using in the FontAwesome suite; Regular, Solid or Brands to choose the appropriate font weight.

FontAwesome Font Weights

• Solid = 900
• Regular =400
• Brands = 400

FontAwesome Font Families

There are 2 fontawesome font families that need to be declared in CSS depending on which one you are using.

• Solid = Font Awesome 5 Free
• Regular = Font Awesome 5 Free
• Brands = Font Awesome 5 Brands

CSS MarkUp

.myclass:before {
    content: '\f017';
    /* font-family: 'Font Awesome 5 Brands'; If using Brand */
    font-family: 'Font Awesome 5 Free';
    /* font-weight: 400;  If using Brands or Regular */
    font-weight: 900;
}