How can I make use of customized icons in PrimeFaces?

Question

PrimeFaces provides a lot of icons from jQuery themeroller. They're useful but I need to have some customized icons for my app. Suppose I have a <p:commandButton>:

<p:commandButton icon="ui-icon ui-icon-check" />

Since my CSS knowledge is very limited, I'd be very grateful if you could show me how I can put some customized icon into the label of the above button.

Best regards,

Answer 1

You need to define your own css class:

.img-button-help { background-image: url('../images/help.png') !important; }

and then use this class in your p:commandButton:

<p:commandButton icon="img-button-help" />

Answer 2

to create your own (user defined/customized) ui-icon in jsf primefaces follow these steps:

1. My image name is "pencilfour.png", put it inside resources folder in webapp.

2. Define your own icon with a new name inside "style" tag in your xhtml page:

   .uipencil-icon {

   width: 16px; 
   
       height: 16px;
   
       align:up;
   
       background-image: url(#{resource['img:pencilfour.png']})!important ; 
   }
   

you can modify with and height as per your requirement.

3. Then you can use the defined icon with the command button

<p:commandButton 

icon="uipencil-icon"

    style="   vertical-align:middle;

    margin-right:10px;

  height:19px;

  width:19px;"

  </p:commandButton>

this will work, the only thing to take care about is providing the correct url: url(#{resource['img:pencilfour.png']})!important ; the syntax for url is imp to fetch the image on the command button :)