PrimeFaces icons

23
votes

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.

Well, I know that in order to use an icon in CommandButton, one has to follow these instructions:

<p:commandButton outcome="target" icon="star" title="With Icon"/>

having defined the star icon in a css file:

.star {
    background-image: url("images/star.png");
}

but I would prefer to use exactly the same arrows as for the PickList component.

3
jquery-uijsfprimefaces

3 Answers

48
votes

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

31
votes

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"/>
0
votes

Try this it worked for me

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