Some Font Awesome icons don't show up (or load with a delay), unless you insert another widget that loads Font Awesome on the page

[MichaelDarko]

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest stable version of Elementor.

Description

When i turn on sub menu indicators in my nav menu, the indicator icons won't load and instead empty rectangle is displayed. This is because Font Awesome is not loaded.

When i add some other icon or widget with icon to the website, this loads Font Awesome and the submenu indicators start showing.

It looks like the nav menu itself doesn't load Font Awesome and when you don't have any other widget that loads Font Awesome in the page, the submenu indicators won't display.

Isolating the problem

• This bug happens with only Elementor plugin active (and Elementor Pro).
• This bug happens with a default WordPress theme active.
• I can reproduce this bug consistently using the steps above.

[shilo-ey]

Hi @MichaelDarko

Go to Elementor > Settings > Advanced > and set "Load Font Awesome 4 Support" to Yes

Let me know if that solved the issue for you.

[MichaelDarko]

Yes, enabling Font Awesome 4 makes it work. But it should be working with the default Font Awesome 5.

I've now tested it on a clean WP install only with Hello theme and Elementor Pro and the issue is there also.

Simple steps to reproduce:

1. Create menu with subcategories
2. Create new page and set the template to Elementor canvas to make sure there are no other elements that use Font Awesome
3. Insert Nav menu widget and save
4. Subcategory indicators won't load on front-end

[vgstef]

MichaelDarko is right. Submenu indicator should appear correctly out of the box! I just installed a new website with the latest Elementor, and submenu icons appear as a strange squared symbol.

But in the backend in the Elementor Editor, the menu indicator is shown correctly.

I don't need Font Awesome 4, and I especially want to avoid loading unnecessary files.

Could Elementor team fix this issue by changing the default submenu indicator code to use one from Font Awesome 5 ?

[rodolphebertozzo]

@shilo-ey, What about fixing it?

[rodolphebertozzo]

+1, I have the same problem

[KeviinCosmos]

Team Elementor?? Please?? We know you're working hard on 3.0, but please :)
I don't have the issue with Astra theme, only Hello.

[drawcard]

This issue plagues every site I build with Elementor, please prioritise this Elementor team, or at least allow us to choose our own icons for these indicators from the FA5 library.

[MichaelDarko]

I now have antother related problem:

When I use the search button in the header, this happens:

• When the page loads, it displays empty rectangle instead of the icon and only after that the icon loads with a delay.

• When I insert the icon widget or some other widget that uses Font Awesome, the search icon loads immediately without the empty rectangle and the delay.

So this is another instance where some widgets don't work correctly until you instert another icon widget into the page.

---

Current situation regarding icons in Elementor:

• It's buggy
• Its' inconsistent
• It's unpredictable
• It's not optimized for performance

[black-eye]

+1

[MichaelDarko]

Here is a GIF of the problem:

[brittaweller]

Same problem here. In the editor the icon for the dropdown sub-menu loads but on frontend not.

Kind of scary how long it takes them to fix these basic bugs which effects everybody with a submenu..

[mattmckenny]

+1 . Clean install and submenu indicator doesn't work on the frontend. FontAwesome 5 should be enqueued when the Nav Menu widget is added to the page and a "Submenu Indicator" has been set.

[alinalota]

Same here.

[portrayaloflife]

+1

[dasigna]

... dont know if its really related, but interestingly out of sudden this appeared on a site we migrated the icons long ago - and now elementor asked for migration again.

also icon widgets were affected.
migrated again, icons there again. very strange things at the moment- scares me.

el 3.0.8.1 / pro 3.0.4

---

edit:
same on frontend as well in editor.

[protasisimone]

+1

[Bovelett]

+1

[cuisinedesign]

+1

[shimsa]

+1

[johngough]

+1

[DorShahar]

Hi guys,
The development team is working on this. Please be patient.

[rodolphebertozzo]

@DorShahar Thanks ;)

[drawcard]

Thank you for the update @DorShahar! I love it when Elementor team communicates about issues that are in the process of being resolved. Please keep it up!

[fgsfalco]

+1

[rodolphebertozzo]

@DorShahar v3.1.0?

[DorShahar]

@rodolphebertozzo I can't commit to that, but I do hope so.

[portrayaloflife]

+1

[bugnumber9]

Having the same problem here. Dropdown menu indicators should work w/o FA4 support.

[supremebot]

• 1
  Waiting patiently Zzzzz

[Mululu]

+1

[brittaweller]

This is also not working with custom icon fonts. When I have icons only inside header and/or footer section and not on the page, the icon-font is not loaded. "Load Font Awesome 4 Support" does not help here so I hope there will be a solution soon. I hope the priority is high on this issue as we have trouble with this on almost EVERY website.

[hitsgee]

Please fix this. It's still causing me so many issues!

[zimventures]

+1

Can we please get an update on this? Crazy that it's taking MONTHS to fix this.

[fxaviers]

+1

[gmariani]

Please stop with the +1 posts. All it does is clutter up the thread. Just use the reaction feature on the individual post.

[eblosch]

It'd be great to see the dev team prioritize and schedule features like this that directly impact the client experience. I have to think the team is working several iterations ahead, has a roadmap, and can in some way provide basic forecasting to the user base.

Even something like "this is targeted for 3.2.3, however dates are subject to change" would go a long way and help devs and site builders manage client expectations, instead of giving clients the canned "it should be coming in the future" response, which doesn't exactly inspire confidence.

[TaskRuler]

Anybody else getting special characters instead of icons? My Load Font Awesome 4 Support is turned on and I have icons loaded on the page, yet this keeps happening from time to time.

[portrayaloflife]

Also seeing strange characters occasionally too instead of icons

[drawcard]

@TaskRuler @portrayaloflife It looks like a fix has been added to v3.3 beta, if you want to try it out:

Fix: Nav Menu widget is not loading Font Awesome submenu icons (#9907)

[shilo-ey]

This issue has been resolved in Elementor Pro v3.3.0

Feel free to update

Thanks!

[portrayaloflife]

@shilo-ey Hey, this is great that this has finally been added but the icons don't load seamlessly. Everytime the menu loads and then the menu item will jolt over and the icon will load. It should all load seamlessly with the icon already there or at the very least spaced over for the icon to load and not jolt the menu

[cyrfercom]

Looks like the problem comes from the file /wp-content/plugins/elementor-pro/assets/lib/smartmenus/jquery.smartmenus.min.js
The submenu icon and its parent-class are first removed with removeClass("has-submenu") and find("span.sub-arrow").remove(), and later added again: addClass("has-submenu") etc.

Fixed in my child-theme's function.php with the followind code.
The submenu icons still load a bit delayed, but at least without a shaking menu.

add_action('wp_head', 'cy_custom_inline_styles', 100); 
function cy_custom_inline_styles() {
?>	
 <style media="screen">
	.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children > a { margin-right: 30.5px !important; display: block !important; position:relative; }
	.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children > a > .sub-arrow { position: absolute; }
</style>
<?php
}

[PPjev]

Menu items don't load seamlessly. Dropdown items are added after DOM is ready, so on every refresh menu items joilt. Problem still exists.