Font Awesome submenu angle-down icon has gone missing from Menu Bar

I am not sure when they went missing, but I have recently updated both the Shapely Theme, and the Shapely Companion Plugin to the latest versions.

What file would I look for to see if I can change the following code:

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

I think the problem is with font awesome 5, and that they require the fa to be fas, like this:

<i class="fas fa-angle-down" aria-hidden="true"></i>

I can’t seem to find the file that contains the code that I can see during inspect of the menu area. Can you tell me what file this code is located?

<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 menu-item-has-children menu-item-1033 dropdown"><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>

You can see the missing icons here: www.brightongate.com.au

I use a child theme, so I will be able to adjust code as needed.

Thanks,
SunnyOz

Hi there

“What file would I look for to see if I can change the following code:” - You can use WordPress string locator to find any text in the theme or plugin: String locator – WordPress plugin | WordPress.org

Regards

Thanks for you reply.

And thanks for the nifty plugin idea. I did try using it to find the string, and found it in this file: wp-content/themes/shapely/inc/class-wp-bootstrap-navwalker.php. I did try changing that file to use fas instead of fa, but that didn’t make any difference.

However, after many many hours researching this, it appears that what I am seeing on the Menu line (inside the small rectangle) is the actual unicode of f107, instead of the font-awesome fa-angle-down arrow, as is coded.

According to others (posted online) that have similar issues, It appears that the problem is either that the font family isn’t correct (ie: Font Awesome 5 Free) or that the incorrect all.min.css file has been uploaded.

Can you please look at the site: www.brightongate.com.au, and do an inspect on the home menu item.

You can see the code: <span class="dropdown-toggle shapely-dropdown" data-toggle="dropdown"><i class="fa fa-angle-down" aria-hidden="true"></i></span> is all greyed out, indicating it isn’t being executed.

As I mentioned earlier, the menu’s drop-down arrows used to display properly. I hadn’t made any changes to the site in several years myself. So at some point some update has broken the display.

Thanks for any help on this matter.
Sunny Oz

I have fixed the problem with the missing font-awesome angle-down icon on the menu.

The answer was provided to me by someone on Stack Exchange:

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

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

I installed the Font Awesome plugin, and all works now.

You might want to check your latest version release of your shapely theme to fix the issue of outdated font awesome files, in case others are having the same issue.

FYI: Even with everything working as it should, the code: <span class="dropdown-toggle shapely-dropdown" data-toggle="dropdown"><i class="fa fa-angle-down" aria-hidden="true"></i></span> is still greyed out when viewed in inspect. So this was never an issue, and I guess that is just the way inspect handles this kind of code.

Thanks,
Dawn

I have fixed the problem with the missing font-awesome angle-down icon on the menu.

The answer was provided to me by someone on Stack Exchange:

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

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

I installed the Font Awesome plugin, and all works now.

You might want to check your latest version release of your shapely theme to fix the issue of outdated font awesome files, in case others are having the same issue.

FYI: Even with everything working as it should, the code: <span class="dropdown-toggle shapely-dropdown" data-toggle="dropdown"><i class="fa fa-angle-down" aria-hidden="true"></i></span> is still greyed out when viewed in inspect. So this was never an issue, and I guess that is just the way inspect handles this kind of code.

Hi there

Thank you for sharing your solution, this problem was reported and hopefully it will be resolved soon by developer

Regards