jsf - 我自己的素面 p :commanButton icon

Question

我不能将自己的图标用于primefaces p:commandButton。我的代码是:

    <p:commandButton value="Cancel" action="#{userBb.cancel()}" 
       icon="ui-icon-myCancel" /> 

css是:

.ui-icon-myCancel{
   background-image: url(images/cancel_16.png) !important;
}

文件夹结构一般: /resources/images/cancel_16.png
结果我得到:

当我尝试:

.ui-state-default .ui-icon .ui-icon-myCancel{
   background-image: url(images/cancel_16.png) !important;
}

我得到:

当我查看 Firebug 报告时，有部分跨度

<span class="ui-button-icon-left ui-icon ui-c ui-icon-myCancel"></span>

有:

.ui-state-default .ui-icon {
    background-image: url("/WarPort08_02b/javax.faces.resource/images/ui-icons_38667f_256x240.png.xhtml?ln=primefaces-aristo");

我看过这个 explanation ，和其他人，但没有找到答案。

当我尝试带有 h:graphicImage 图标的 p:commandLink 时，它是可见的，但它是作为按钮/链接的图像。

Answer 1

Zbyszek，这些是我为获得以下输出而采取的步骤。根据您的评论，我假设这就是您所追求的。



备注 : 我图片的名字是test.jpg它在以下目录中resources/images/test.jpg .
您提供的样式规则也被放置在 resources/css/style.css 中.我的图像的大小是 25 x 17(但我怀疑这很重要。我只是这样说，以防您认为图标太小)。

在 <h:head>确保你有(也许你忘记添加这个并且没有应用样式？)

<h:outputStylesheet name="css/style.css" />

我的 < p:commandButton> (根据需要更改，这只是一个快速模型)

<p:commandButton value="Cancel" icon="ui-icon-myCancel" /> 

和你的规则

.ui-icon-myCancel{
    background-image: url("#{resource['images/test.jpg']}") !important;
}