Jsf Primefaces菜单项更改自定义图标

我在自定义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;
}

.用户{
背景：url（'resources/images/menu/users.png'）不重复；
高度：16px；
宽度：16px；
}

我使用PrimeFaces 5。

试试这个

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

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

.用户{
背景：url（../images/menu/users.png）！重要；
高度：16px；
宽度：16px；
}

你需要

！重要信息

覆盖Primefaces的默认图像并直接在src目录下创建文件夹图像

Primefaces 6

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

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

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

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

如果要添加带有文本的图标，请执行以下操作：

<p:menuitem url="./Konfiguration.xhtml" 
    styleClass="myStyleName" value="navigation" />

---

你的第二条路是正确的。但我担心通往图像的路径是错误的。您使用的这个是相对于类所在的文件夹的。请确保您将正确的路径放置到此图像。如果您查看javascript控制台，您将看到与检索图标图像相关的任何错误（可能是HTTP-404）。请查看此图像以检查我的路径是否正确“注意，将有一个空的流量膨胀span标记。”-您能详细说明吗？

a.ui-menuitem-link.ui-corner-all.myStyleName{
    background: url("img/zahnrad.png") no-repeat;
    background-size: 1em; 
    width: 1em;
    height: 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;
    */
}