I cannot use my own icon for a primefaces p:commandButton. My code is:
<p:commandButton value="Cancel" action="#{userBb.cancel()}"
icon="ui-icon-myCancel" />
css is:
.ui-icon-myCancel{
background-image: url(images/cancel_16.png) !important;
}
Structure of folders is ordinary: /resources/images/cancel_16.png
As a result i get:
When I try:
.ui-state-default .ui-icon .ui-icon-myCancel{
background-image: url(images/cancel_16.png) !important;
}
I get:
When I look at firebug report, there is section span
<span class="ui-button-icon-left ui-icon ui-c ui-icon-myCancel"></span>
there is:
.ui-state-default .ui-icon {
background-image: url("/WarPort08_02b/javax.faces.resource/images/ui-icons_38667f_256x240.png.xhtml?ln=primefaces-aristo");
I have looked at this explanation, and others but found no answer.
When I try p:commandLink with h:graphicImage icon is visible, but it is an image as a button/link.
Zbyszek, these are the steps I took to get the output below. Based on your comment, I'm assuming that's what you're after.
Note: My picture's name was test.jpg
and it was in the following directory
resources/images/test.jpg
.
Also the style rule you provided was placed in resources/css/style.css
. The size of my image was 25 x 17 (but I doubt that's important. I'm just saying this in case you're thinking the icon is too small).
In <h:head>
make sure you have (Maybe you forgot to add this and the styles weren't being applied ?)
<h:outputStylesheet name="css/style.css" />
My <p:commandButton>
(change as needed, it was just a quick mock up)
<p:commandButton value="Cancel" icon="ui-icon-myCancel" />
and your rule
.ui-icon-myCancel{
background-image: url("#{resource['images/test.jpg']}") !important;
}