Jsf 我自己的primefaces p:commanButton图标

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

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

文件夹的结构很普通：

/resources/images/cancel\u 16.png

因此，我得到：

当我尝试时：

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

我得到：

当我看firebug报告时，有一个部分是span

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

我看了这个，还有其他的，但是没有找到答案

---

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

Zbyszek，以下是我获取以下输出的步骤。根据你的评论，我想这就是你想要的

注意：我的照片的名字是

test.jpg

，它在下面的目录中

resources/images/test.jpg

。 您提供的样式规则也放在

resources/css/style.css

中。我的图像大小是25 x 17（但我怀疑这是否重要。我只是说，以防你认为图标太小）

在

中，确保您已经添加了（可能您忘记添加此项，并且没有应用样式？）

你的规则呢

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

这个简单的url（）版本也适用于Primefaces 6.1:

.ui icon myCancel{背景图像：url（img/cancel.gif）！重要；}

（如果将图标文件放在web/img文件夹中，而css文件在web文件夹中）

但它会使图标的角变圆，因此我使用此解决方案：

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

---

你提供的链接的第三个答案是什么？我也在那里给你留下了一条评论。它对我不起作用：。如果我尝试：那么我会得到一张图片作为链接，可以“点击”，但我想要一个带有图标和标题的命令按钮。你的图片大小是多少？谢谢你的正确答案。我的错是给了图像错误的路径。我将其编码为：url（images/cancel_16.png）。但当我以您的方式使用JSF资源标识符时：url（“#{resource['images/cancel_16.png']}”）突然出现了：）图标。当我编写代码时也会显示：url（../resources/images/cancel_16.png）或url（/MyAppName/resources/images/cancel_16.png）。所以这都是关于对图像的正确引用，我认为使用资源标识符（您展示的）是最好的方法。@Zbyszek是的，要么是

h:outputStyleSheet

，要么是它没有定位图像。不久前我遇到了这个问题。你没有给我错误的道路，至少我不这么认为。我只是加了那张便条，这样你就可以清楚地看到我在做什么。很高兴它成功了。不客气。@CagatayCivici感谢您的支持。

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

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

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

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