html - 尝试为菜单项添加图像

Question

这些是菜单项。请注意，我将图像类提供给 City 菜单项。

<p:submenu label="Address">
    <p:menuitem value="Country" url="/secured/country.xhtml?redirect=true" />
    <p:menuitem value="State" url="/secured/state.xhtml?redirect=true" />
    <p:menuitem value="City" url="/secured/city.xhtml?redirect=true" icon="images"/>                          
    <p:menuitem value="Location" url="/secured/location.xhtml?redirect=true" />
</p:submenu>

这是我的 CSS 类：

 .images{
     background: url('../resources/images/admini.ico') no-repeat;
     height:16px;
     width:16px;
}

但是，不是出现图像，而是出现向上的箭头标记。我怎样才能解决这个问题？

Answer 1

尝试将您的图标定义如下

.ui-menuitem-icon.images{
     background: url('../resources/images/someImage.png') no-repeat;
     height:16px;
     width:16px;
}

看看这个线程如何将自定义图标添加到菜单项？

Answer 2

尝试这个...

      .tabmenubutton
        {
         background:url("common/images/calendar.png") no-repeat !important;
         width:20px;
         height:20px;
        }

xhtml:

      <p:menuitem value="Country" icon="tabmenubutton"/>