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 properly.

Add FontAwesome CSS

First up is to call the correct FontAwesome CSS, hook in the FontAwesome CSS either via wp_enqueue or a CSS import

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

or

@import url("//use.fontawesome.com/releases/v5.3.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;
}

Leave a Comment