Primefaces Menuitem更改自定义图标 [英] Primefaces menuitem change custom icon

问题描述

我在自定义menuitem组件的图标时遇到一些问题.

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"/>

我也尝试使用CSS

<p:menuitem value="Clientes" outcome="/clientes/CadastroCliente" icon="user"/>

.user{
    background: url('resources/images/menu/users.png') no-repeat;
    height:16px;
    width:16px;
}

我使用PrimeFaces 5.

I use PrimeFaces 5.

推荐答案

primeFaces 6

primeFaces 6

如果您不想创建自己的皮肤并直接设置样式并仅显示图标/图像，

If you don’t want to create your own skin and setup the style directly and show a icon/image only,

您可以执行以下操作: 请注意，标记内没有 value ="avoid"属性.

You can do this: Note, there is no value="avoid" attribute inside the tag.

<p:menuitem url="./config.xhtml" styleClass="myStyleName"/>

结果是:

<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.

使用的样式:

a.ui-menuitem-link.ui-corner-all.myStyleName{
    background: url("img/zahnrad.png") no-repeat;
    background-size: 1em; 
    width: 1em;
    height: 1em;
}

在我的案例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" />

结果是:

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

使用的样式:

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

这篇关于Primefaces Menuitem更改自定义图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！