jquery-ui - plus - primeui icons

Iconos de PrimeFaces

Question

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.

Answer 1

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

Answer 2

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

Answer 3

Prueba esto, funcionó para mí

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