我自己的主要部分p:commanButton图标

Question

我不能使用我自己的图标作为主要的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;
}

我明白了:

当我看萤火虫报告时,有节跨度

<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");

我看过这个解释,其他人却没有找到答案.

当我尝试p:commandLink with h:graphicImage图标是可见的,但它是一个图像作为按钮/链接.

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;
}