我自己的primefaces p：commandButton图标

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

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

当我尝试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" />

我的＆lt; p:commandButton>（根据需要进行更改，这只是一个快速模拟）

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

和你的规则

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

Answer 2

这个简单的url（）版本也适用于Primefaces 6.1：
.ui-icon-myCancel{background-image: url(img/cancel.gif)!important;}
（如果你把图标文件放到web / img文件夹，css文件在web文件夹中）<登记/>
但它围绕图标的角落，因此我使用此解决方案：

.ui-icon-myCancel{background-image: url(img/cancel.gif)!important;  
                  border-radius: 0px!important;}