Primefaces menuitem change custom icon

问题

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.

回答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

回答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;
    */
}

来源：https://stackoverflow.com/questions/26040767/primefaces-menuitem-change-custom-icon

标签

jsf

primefaces

menuitem