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.6.1/css/all.css' );

or in your style.css add …

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

You can find out the latest FontAwesome 5 version here just adjust the URL accordingly.

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

  • 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;
}

1 Comment

  1. […] the above, a Fontawesome 5 icon is being used as it is already loaded in the […]

Leave a Comment