7

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: enter image description here

When I try:

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

I get:enter image description here

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.

Community
  • 1
  • 1
Zbyszek
  • 647
  • 2
  • 8
  • 21

2 Answers2

15

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.

commandButton with value and icon

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;
}
Andy
  • 5,900
  • 2
  • 20
  • 29
  • Thanks for the correct answer. My fault was to give the wrong path to the image. I've coded it as this: url(images/cancel_16.png). But when I use JSF resource identifier in a way you did: url("#{resource['images/cancel_16.png']}") suddnely :) icon appeared. Also it appears when I code: url(../resources/images/cancel_16.png) or url(/MyAppName/resources/images/cancel_16.png). So it was all about proper reference to image, and I think that using resource identifier (which you show) is the best way. – Zbyszek Jul 13 '13 at 13:44
  • @Zbyszek Yes, it was either the `h:outputStyleSheet` or the it wasn't locating the image. I ran into that problem awhile back. You didn't give me the wrong path, at least I don't think. I just added that note so you could see exactly what I was doing. Glad it worked out. You're welcome. – Andy Jul 13 '13 at 14:30
2

This simple url() version also works on Primefaces 6.1:
.ui-icon-myCancel{background-image: url(img/cancel.gif)!important;}
(if you put the icon file to web/img folder and the css file is in web folder)

But it rounds the corners of icon therefore I use this solution:

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