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

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 >
    <ul id="menu" >
        <li id="menu-item-1033" >
            <a title="Home" href="http://www.brightongate.com.au/">Home </a>
            <span  data-toggle="dropdown">
                <i  aria-hidden="true"></i>
            </span>
            <ul role="menu" >
                <li id="menu-item-1233" >
                    <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" >
            <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  data-toggle="dropdown"><i  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

CodePudding user response：

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

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

https://wordpress.org/plugins/font-awesome/

It is free and defiantly solves your problem.