7

我不能将我自己的图标用于 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;
}

我得到：在此处输入图像描述

当我查看萤火虫报告时，有部分跨度

<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 图标是可见的，但它是作为按钮/链接的图像。

4

2 回答 2

15

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;
}
于 2013-07-13T00:23:23.320 回答
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;}
于 2017-06-01T13:08:01.177 回答