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', '//' );

or in your style.css add …

@import url("//'");

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. Tinny on March 17, 2020 at 10:17 am

    I don’t know why, I had the same problem just with MacOS, using pseudo elements. Font-family “Fontawesome” worked with Windows, “Font Awesome 5 Free” fixed the issue.

  2. Lia on August 22, 2019 at 9:30 am

    Very helpful! Thanks!

  3. Ruben on May 29, 2019 at 4:41 pm

    This solved my problem! I was using font-family: ‘Font Awesome’ not ‘Font Awesome 5 Free’, this made my day, thank you!

Leave a Comment