jquery-ui - plus - primeui icons
Iconos de PrimeFaces (3)
Aquí una lista de todos los iconos de jQuery UI disponibles
jQueryUI Icons Cheatsheet N # 1 (haga clic en Toggle text para obtener todos los nombres de los iconos)
jQueryUI Icons Cheatsheet N # 2
al menos en <p:commandLink puedes aplicar los iconos usando styleClass por ejemplo styleClass="ui-icon ui-icon-trash" (no recuerdo haber intentado lo mismo en p:commandButton - always preferred <p:commandLink )
Por cierto, <p:commandButton no tiene ningún atributo de outcome , <p:button tiene ...
Además, desde PF v5.1.1 también puede utilizar los iconos de Font Awesome fuera de la caja, estableciendo en verdadero las primefaces.FONT_AWESOME contexto FONT_AWESOME, como este
<context-param>
<param-name>primefaces.FONT_AWESOME</param-name>
<param-value>true</param-value>
</context-param>
y usándolo así:
<p:commandButton value="Download" icon="fa fa-download" type="button"/>
o
<p:menuitem value="Refresh" url="#" icon="fa fa-refresh"/>
Ver presentación: PrimeFaces - FontAwesome - Desde v5.1.1
No puedo encontrar una manera de elegir los icons flecha como los que están en el componente PickList , para usarlos en otros CommandButtons .
Bueno, sé que para usar un icono en CommandButton, uno tiene que seguir estas instrucciones:
<p:commandButton outcome="target" icon="star" title="With Icon"/>
habiendo definido el ícono de estrella en un archivo css:
.star {
background-image: url("images/star.png");
}
pero preferiría utilizar exactamente las mismas flechas que para el componente PickList.
Primefaces usa jQuery themeroller para diseñar UI. Todos los iconos usados en Primefaces son de allí. Simplemente el icono de mouseover que te gusta (en Themeroller) y algo así como: .ui-icon-arrow-1-e aparecerá. Entonces úsalo así:
<p:commandButton action="target" icon="ui-icon ui-icon-arrow-1-e" value="Arrow icon"/>
Prueba esto, funcionó para mí
.star {background:url("images/star.png") no-repeat !important;
width:20px;
height:16px;
}