Search code examples
cssjsf-2primefacesiconsstyling

How can I make use of customized icons in PrimeFaces?

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,

Solution

  • 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" />