Primefaces menuitem change custom icon - jsf

Question

I have some problems to customize the icon of menuitem component.
I tried this form but i don't have success:
<p:menuitem value="Clientes" outcome="/clientes/CadastroCliente" icon="resources/images/person.png"/>
I too try use css
<p:menuitem value="Clientes" outcome="/clientes/CadastroCliente" icon="user"/>
.user{
background: url('resources/images/menu/users.png') no-repeat;
height:16px;
width:16px;
}
I use PrimeFaces 5.

Answer 1

Try this
<p:menuitem value="Clientes" outcome="/clientes/CadastroCliente" icon="user"/>
.user {
background: url(../images/menu/users.png) !important;
height:16px;
width:16px;
}
You need !important to overwrite the default image of Primefaces and create the folder images directly under src directory

Answer 2

primeFaces 6
If you don’t want to create your own skin and setup the style directly and show a icon/image only,
You can do this:
Note, there is no value=”avoid” attribute inside the tag.
<p:menuitem url="./config.xhtml" styleClass="myStyleName"/>
The result is:
<li role="menuitem">
<a tabindex="-1"
class="ui-menuitem-link ui-corner-all myStyleName"
href="./Konfiguration.xhtml">
<span class="ui-menuitem-text"></span>
</a>
</li>
Note there will be a empty traffic blow up span tag.
used style:
a.ui-menuitem-link.ui-corner-all.myStyleName{
background: url("img/zahnrad.png") no-repeat;
background-size: 1em;
width: 1em;
height: 1em;
}
Important is the background-size in my case 1em
If you would like to add a icon with text so do this:
<p:menuitem url="./Konfiguration.xhtml"
styleClass="myStyleName" value="navigation" />
The result is:
<li role="menuitem">
<a tabindex="-1" class="ui-menuitem-link ui-corner-all myStyleName" href="./config.xhtml">
<span class="ui-menuitem-text">navigation</span>
</a>
</li>
used style:
a.ui-menuitem-link.ui-corner-all.myStyleName{
background: url("img/zahnrad.png") no-repeat;
background-size: 1em;
padding-left: 1.2em; /* reserved text space */
/*
right to left
background-position: right;
padding-right: 1.2em;
*/
}