PrimeFaces icons

Question

I cannot find a way to pick the arrow icons like the ones present in the PickList component, in order to use them in other CommandButtons

Answer 1

Primefaces use jQuery themeroller for styling UI. All of the used icons in Primefaces are from there. Just mouseover icon you like (in themeroller) and something like : .ui-icon-arrow-1-e will pop. Then use it like this:

<p:commandButton action="target" icon="ui-icon ui-icon-arrow-1-e" value="Arrow icon"/>

Answer 2

Try this it worked for me

.star {background:url("images/star.png") no-repeat !important;
     width:20px;
     height:16px;
    }

Answer 3

Here a list of all available jQuery UI icons

jQueryUI Icons Cheatsheet N#1 (click on Toggle text to get all the names of the icons)

jQueryUI Icons Cheatsheet N#2

at least in <p:commandLink you can apply the icons using styleClass for example styleClass="ui-icon ui-icon-trash" (don't remember trying the same on p:commandButton - always preferred <p:commandLink)

B.T.W , <p:commandButton has no outcome attribute , <p:button has it...

---

In addition since PF v5.1.1 you can also use the icons of Font Awesome out of the box, by setting to true the primefaces.FONT_AWESOME context param , like this

<context-param>
   <param-name>primefaces.FONT_AWESOME</param-name>
   <param-value>true</param-value>
</context-param>

and using it like this:

<p:commandButton value="Download" icon="fa fa-download" type="button"/>

or

<p:menuitem value="Refresh" url="#" icon="fa fa-refresh"/>

See showcase: PrimeFaces - FontAwesome - Since v5.1.1