Menu's drop-down angle (font awesome icon) is only displaying small rectangle with the unicode of f107

This is a WordPress site using Colorlib's Shapely Theme and the Shapely Companion plugin. (Note: This is a bootstrap theme, and uses bootstrap-navwalker. I am also using a child theme to customise the site.)

The site can be found here: www.brightongate.com.au

The font-awesome angle-down arrow used to display on the menu line, next to the Home page link. At some point it stopped showing the arrow, and instead only shows a small rectangle box with the unicode inside: f107. (Note: I haven't done any changes myself to this site for a long time - outside of updating plugins, etc.)

Here is the relevant code:

<div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul id="menu" class="menu">
        <li id="menu-item-1033" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-642 current_page_item current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-1033 dropdown active">
            <a title="Home" href="http://www.brightongate.com.au/">Home </a>
            <span class="dropdown-toggle shapely-dropdown" data-toggle="dropdown">
                <i class="fa fa-angle-down" aria-hidden="true"></i>
            </span>
            <ul role="menu" class=" dropdown-menu">
                <li id="menu-item-1233" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-642 current_page_item menu-item-1233 active">
                    <a title="[ Welcome to Brighton Gate - home page ]" href="http://www.brightongate.com.au/">[ Welcome to Brighton Gate – home page ]</a>
                </li>
            </ul>
        </li>
        <li id="menu-item-1021" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1021">
            <a title="Log In" href="http://www.brightongate.com.au/login/">Log In</a>
        </li>
    </ul>
</div>

Using inspect on the home menu item, you can see that the span surrounding the font-awesome code is grayed out, making it look like it isn't being executed:

<span class="dropdown-toggle shapely-dropdown" data-toggle="dropdown"><i class="fa fa-angle-down" aria-hidden="true"></i></span>

According to others (posted online) that have similar issues (with font-awesome icons not displaying drop-down icon), it appears that the problem might either be that the font family isn’t correct (ie: Font Awesome 5 Free) or that the incorrect all.min.css file has been uploaded.

I have tried to verify both of these possible issues as follows:

Still looking with inspect, clicking on the line of i class code, I can see that the class fa is defined using the correct font-weight & font-family:

.fa, .fas {
  font-weight: 900;
}
.fa, .far, .fas {
  font-family: "Font Awesome 5 Free";
}

Looking at the Shapely function.php file, you can see that it includes the font-awesome css file:

    // Add Font Awesome stylesheet
    wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/assets/css/font-awesome.min.css' );

And also from View Source I can see the font-awesome css is indeed brought in (showing a version of 5.9.5)

<link rel='stylesheet' id='font-awesome-css'  href='http://www.brightongate.com.au/wp-content/themes/shapely/assets/css/fontawesome/all.min.css?ver=5.9.5' type='text/css' media='all' />

Can someone see any other issues why the span code surrounding the font-awesome drop-down icon isn't being executed?

Or is there a way to verify that I have the correct version of the all.min.css file being used?

Thanks for any help on this matter. Sunny Oz

This issue often occurs when the theme or other files are outdated,

You can solve this problem with a Wordpress plugin by Font Awesome,

It is free and it definitely solves your problem.