如何更改primefaces中的menubutton图标？

Question

我想在p：menuButton中添加一个自定义图标，这可能吗？

Answer 1

是的，这是可能的。您需要做的就是为p:menuButton生成的覆盖 primefaces css类。

方法：

1. 在呈现的网页中，您可以右键点击生成的p:menuButton和 - ＆gt;检查元素。在那里，您可以检查所有相关的 css类。
2. 您可以尝试使用它们（我建议，如果您有时间），以便更好地了解 css选择器等等......
3. .ui-menubutton .ui-state-default .ui-icon是您需要的课程。

现在当您知道哪些 css类与图标相关时，您可以覆盖它们：

将.ui-menubutton .ui-state-default .ui-icon规则添加到您的样式表（我假设您有一个，并且已成功导入并正常工作。如果不是，请检查here。）

yourStyles.css ：

.ui-menubutton .ui-state-default .ui-icon {
    background: orange; /** insert your background image **/
}

这将覆盖项目中使用的所有p:menuButtons的图标。如果您想将其缩减为某个特定p:menuButton，请将其ID添加到样式定义中。

#menubID.ui-menubutton .ui-state-default .ui-icon {
        background: orange; /** insert your background image **/
    }