awesome and p:tabMenu

[primefc]

Seems that the font awesome on mobile does not work well, or im using it on a wrong way
the 1sti option shows the icon on left of the button text
the 2nd option show the jquery icon on the current position

any tip for this ?
(using Primefaces 6)

Code: Select all

			<p:tabMenu">
				<p:menuitem value="Login" icon="fa fa-edit" url="#"
					iconPos="bottom" />
				<p:menuitem value="Forgot Password" icon="fa fa-edit" url="#"
					iconPos="bottom" />
				<p:menuitem value="About" icon="fa fa-edit" url="#"
					iconPos="bottom" />
			</p:tabMenu>

[primefc]

to help someone,
i did it changing the org.primefaces.mobile.renderkit.BaseMenuRenderer
on encodeMenuItem

Code: Select all

   Object value = menuitem.getValue();
        if(value != null) {
            writer.writeText(value, null);
        }
        
        // primefc, awsome icons begin
        String icon = menuitem.getIcon();
    	if( icon!=null && icon.startsWith("fa ")){
    		writer.startElement("span", null);
    		writer.writeAttribute("class", "fa-span-beforeimg", null);
	    		writer.startElement("i", null);
	    		//writer.writeAttribute("style", "margin-left:-10px;margin-right:10px;", null);
	    		writer.writeAttribute("class", icon, null);
	    		writer.endElement("i");
    		writer.endElement("span");
    	}
    	// primefc , awsome icons end
    	
        writer.endElement("a");  

thank you have to change the css to show the correct position on menu

[adam_jhon]

200-125 vce