我自己的PrimeFaces p:commandButton图标

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

我已经查看了这个解释，还有其他的，但没有找到答案。

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

- Zbyszek

---

你提供的链接中第三个答案怎么样？我也在那里给你留了评论。 - Andy

这对我不起作用：<p:graphicImage value="images/cancel_16.png" />。 如果我尝试：<p：commandLink ajax ="false"> <p：graphicImage name ="images/cancel_16.png" /> </ p：commandLink>，那么我会得到一个可以“点击”的链接图片，但我想要一个带有图标和标题的命令按钮。 - Zbyszek

你的图片尺寸是多少？ - Andy

Answer 1

以下是我采取的步骤，以获得下面的输出。根据您的评论，我假设这就是您想要的。

注意：我的图片名称为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;
}

- Andy

---

感谢您提供正确的答案。我的错误在于给出了错误的图像路径。我编写的代码是：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

@Zbyszek 是的，可能是 h:outputStyleSheet 或者它没有找到图片。我之前也遇到过这个问题。你没有给错路径，至少我不这么认为。我只是加了那个注释，让你能够清楚地看到我在做什么。很高兴问题解决了。不用谢。 - Andy

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

- Linkman