CODEWITHSUNDEEP
jquery-uijsfprimefaces
perissf
perissf

Reputation: 16273

PrimeFaces icons

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.

Upvotes: 23

Views: 71782

Answers (3)

Daniel
Daniel

Reputation: 37071

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

Upvotes: 47

maresca
maresca

Reputation: 11

Try this it worked for me

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

Upvotes: 0

Fallup
Fallup

Reputation: 2427

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

Upvotes: 31

Related Questions