jsf - 如何更改primefaces中的菜单按钮图标？

Question

我想在 p:menuButton 中放置一个自定义图标，这可能吗？

Answer 1

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

方法:

1. 在呈现的网页中，您可以右键单击生成的 p:menuButton 和 -> 检查元素。在那里您可以检查所有相关的 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 添加到 style 定义中。

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