尝试为菜单项添加图像答案

【问题标题】：Trying to add image for menu items尝试为菜单项添加图像
【发布时间】：2013-08-17 06:12:41
【问题描述】：

这些是菜单项。请注意，我将图像类赋予 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;
}

但是，不会出现图像，而是出现向上的箭头标记。我该如何解决这个问题？

【问题讨论】：

尝试使用一些 png 文件而不是 ico ，也知道你可以使用这些图标jquery-ui.googlecode.com/svn/tags/1.6rc5/tests/static/… (点击 Toggle text to获取所有图标的名称）
@Daniel 尝试使用 .png 图像，但结果是显示此符号“^”而不是图像
@Daniel 我想使用自己的图像集
尝试使用styleClass="images" 而不是icon

标签： html jsf primefaces

【解决方案1】：

尝试将您的图标定义如下

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

看看这个帖子How do you add a custom icon to a menuitem?

【讨论】：

【解决方案2】：

试试这个...

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

xhtml:

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

【讨论】：