no font-awesome icons visible in submenu [fix included]

[betafritz]

I´m using font-awesome icons in my contextmenus. when you hover the item that has the submenu as child, the icon-color changes to white (#fff). that´s because you than can see the top item icon even when its has now the hover color. But that also changes the items color in the submenu to white so they are not visible.

so to fix that you must enter a ">" in the css rule (line 171 in jquery.contextMenu.css v2.7.0):

.context-menu-icon.context-menu-icon--fa5.context-menu-hover > i,.context-menu-icon.context-menu-icon--fa5.context-menu-hover svg {

    color: #fff

}

I haven´t check on the svg item. but i guess there should be a > too.

[bbrala]

When i try to reproduce this i see the icons without a problem, with the SVG and CSS version of font-awesome 5. What browser are you using?

[EddieAguirre]

I'm having a similar or the same issue. In my case the icons in the submenu appear as expected until I add an icon to the submenu selector (the item that displays the submenu).

Below is the output when the submenu selector item doesn't have an icon.

Below is after adding the submenu selector icon, the submenu icons disappear.

And the same as above while hovering over a submenu item. You can see the icon is there it just doesn't show until hovered.

I'm using Font Awesome as well.

var tmpItems = { "Hello": { "name": "Hello", "icon": "fas fa-columns", }, "fold1": { "name": "Columns", "icon": "fas fa-columns", "items": tmpColumnItems, }, };

[klues]

had the same problem. in jquery.contextMenu.css just instead this:

.context-menu-icon.context-menu-icon--fa5.context-menu-hover i, .context-menu-icon.context-menu-icon--fa5.context-menu-hover svg {
  color: #fff;
}

use:

.context-menu-icon.context-menu-icon--fa5.context-menu-hover > i, .context-menu-icon.context-menu-icon--fa5.context-menu-hover > svg {
  color: #fff;
}

So the > only applies to direct childs and makes the icon white for them (because background of selected items is blue). Other childs remain unaffected and the icons remain blue.

looks like this in my project: http://prntscr.com/l17i3g

[klues]

for fixing the issue for release the SASS rule in https://github.com/swisnl/jQuery-contextMenu/blob/master/src/sass/jquery.contextMenu.scss#L62 would have to be changed so that only direct childs are affected.

[klues]

oh, sorry, did not see that @betafritz also proposed the solution... only saw that the issue is still open.

[bbrala]

Sorry for the delay, a fix has been published.