Question

大家好我有一个带子菜单栏的菜单栏，但如果存在子菜单，则会显示图标。我想从菜单字段中设置图标。所以我希望有人可以提供帮助。在这里你可以看到一张图片：https://www.dropbox.com/s/h8yqq7d2mirj0cq/bar.JPG。为了图像的质量差而讽刺。

我正在使用JSF 2.1，primefaces 3.5和来自primefaces的jquery主题。

菜单栏

<p:menubar styleClass="affaires"   style="position: absolute !important; bottom: 0px !important; vertical-align: bottom !important; list-style: none; width: 100%; text-align: center;"  >
            <p:menuitem value="Home" url="#"/>

            <p:submenu  label="Company">
                <p:menuitem  value="Create Company" url="#"/>
                <p:menuitem   value="Show Companies" url="companies.xhtml"/>
            </p:submenu>

            <p:submenu  label="Taskbox" >
                <p:menuitem value="Inbox" url="taskbox.xhtml"/>
                <p:menuitem value="Sent" url="#"/>
                <p:menuitem value="Trash" url="#"/>
                <p:menuitem value="New Message" url="#"/>
            </p:submenu>

            <p:submenu label="#{loginBean.user.USER_NAME}" >
                <p:menuitem value="Logbook" url="#"/>
                <p:submenu label="Settings" url="#">
                    <p:menuitem value="Account" url="#"/>
                    <p:menuitem value="Contact" url="#"/>
                </p:submenu>
                <p:menuitem value="Logout" url="#"/>
            </p:submenu>

            <p:submenu label="Administration" icon="">
                <p:menuitem value="Users" url="#"/>
                <p:menuitem value="Edit Help" url="#"/>
                <p:menuitem value="Edit GTC" url="#"/>
            </p:submenu>    

            <p:menuitem value="Help" url="#"/>  

    </p:menubar>

theme.css

 .affaires .ui-menuitem-text{ color:black;}

 .affaires .ui-menu-child{background: white;}

 ul li.ui-menuitem-active>a{
    background-image: none !important;
    background-color:red !important;    
}

li ul li.ui-menuitem-active>a{
    background-image: none !important;
    background-color:green !important;    
}

Answer 1

我找到了解决方案

在theme.css中配置以下标记

/* left-aligned */
.ui-menu .ui-icon {
  top: .2em;
  left: .2em;
}

Primefaces下拉图标对齐？

1 个答案: