Understrap Child Theme - Font Awesome icons not appearing

Question

I'm building a Wordpress site with Understrap, customizing a child theme. The way I understand it, the theme comes with Font Awesome installed. I'm attempting to add some icons, like so:

<i class="fab fa-facebook"></i>

But all I see in the browser is what looks like a weird slanted hamburger. See Image It looks like the styles are being pulled in when I inspect. See Image

Not sure what I'm missing. Is there some special step I need to take to activate Font Awesome? Everything's being imported correctly as far as I can tell. I'm just using the default child theme.

Answer 1

First check the page source to see if the parent theme styles have been enqueued or not. You must use the following code to load parent theme style. Put this code in the child theme functions.php file :

add_action( 'wp_enqueue_scripts', 'prefix_load_parent_theme_style');
  function prefix_load_parent_theme_style() {
      wp_enqueue_style( 'parent-style', 
      get_template_directory_uri().'/style.css' );
  }

Answer 2

Try and redeclare the font:

.fa-apple:before{
  font-family: Font Awesome;
    }

Sometimes it gets overridden by other :before fonts

Answer 3

Uses font awesome 4.7

<i class="fa fa-facebook" aria-hidden="true"></i>

https://fontawesome.com/v4/icon/facebook