2

I have a problem with menu icons in PrimeFaces : the UI icon seems to be in conflict with the FontAwesome one. Here is a screenshot:
Screenshot of icons in conflict

When I look in my browser's inspector, I can see that four classes are applied to the div: ui-menuitem-icon, ui-icon, fa and fa-terminal. Removing one or both of ui-menuitem-icon or ui-icon solves the problem. But, I would like to do it without some ugly script.

Here is how the menubar is displayed (please note that this line is in a layout (as a header)) :

<p:menubar model="#{menuGenerator.menu}" style="margin-bottom: 20px"></p:menubar>

My model is generated with the following method :

public MenuModel getMenu(){
    MenuModel result = new DefaultMenuModel();

    result.addElement(new DefaultMenuItem("SQL", "fa fa-terminal", "/"));

    //...

    result.generateUniqueIds();
    return result;
}

The parameter primefaces.FONT_AWESOME is set to true.

I'm currently using Primefaces 5.0, and Mojarra 2.2.12.

How do I make the menu appear without the conflict between the UI icon and the FontAwesome one (e.g. with only one of the two classes ui-menuitem-icon, ui-icon applied to the div)?

Makyen
  • 31,849
  • 12
  • 86
  • 121
EclipseOnFire
  • 21
  • 3
  • Are you using any theme? – Jorge Campos Jun 20 '16 at 23:13
  • Is this helpful? http://stackoverflow.com/q/21052851 – BalusC Jun 21 '16 at 04:56
  • @JorgeCampos Yes, I'm using the Bootstrap theme. @BalusC Nice search, i wasn't able to find that using my keywords :) However it doesn't work... When I try to apply something different like `text-indent: 20px` its effect is applied to the `.fa` so the "^" is still present... – EclipseOnFire Jun 21 '16 at 17:14

0 Answers0