Question

我有一些问题需要自定义menuitem组件的图标。

我试过这个表格，但我没有成功：

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

Answer 1

试试这个

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

.user {
    background: url(../images/menu/users.png) !important;
    height:16px;
    width:16px;
}

您需要!important覆盖Primefaces的默认图像并直接在src目录下创建文件夹images

Answer 2

primeFaces 6

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

你可以这样做：请注意，标记内没有 value =“avoid”属性。

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

请注意，会有一个空的流量爆炸范围标记。

使用的风格：

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

重要的是我的案例1em中的背景大小

如果您想添加带文字的图标，请执行以下操作：

<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更改自定义图标

2 个答案: