PrimeFaces icônes

je ne peux pas trouver un moyen de recevoir la flèche icons comme ceux présents dans le PickList composant, afin de les utiliser dans d'autres CommandButtons.

Eh bien, je sais que pour utiliser une icône dans le bouton de commande, il faut suivre ces instructions:

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

ayant défini l'icône de l'étoile dans un fichier css:

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

mais je préférerais utiliser exactement les mêmes flèches que pour le composant PickList.

23
demandé sur Daniel 2012-04-14 11:54:19

3 réponses

Primefaces utiliser jQuery themeroller pour le style de l'INTERFACE utilisateur. Toutes les icônes utilisées dans Primefaces sont de là. Juste icône mouseover vous aimez (dans themeroller) et quelque chose comme : .ui-icon-arrow-1-e pop. Ensuite l'utiliser comme ceci:

<p:commandButton action="target" icon="ui-icon ui-icon-arrow-1-e" value="Arrow icon"/>
31
répondu Fallup 2012-04-14 10:26:08

Voici une liste de toutes les icônes jQuery UI disponibles

jQueryUI Icônes Triche N#1 (cliquez sur Toggle text pour obtenir tous les noms des icônes)

jQueryUI Icônes Triche N ° 2

au moins <p:commandLink vous pouvez appliquer les icônes en utilisant styleClass par exemple styleClass="ui-icon ui-icon-trash" (ne me souviens pas d'essayer la même chose sur p:commandButton - toujours préféré <p:commandLink)

B. T. W,<p:commandButton n'a pas de outcome attribut <p:button a il...


depuis PF v5.1.1 vous pouvez aussi utiliser les icônes de Police Génial hors de la boîte, par la mise à true, le primefaces.FONT_AWESOME param , comme ceci

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

et en l'utilisant comme ceci:

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

ou

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

Voir la vitrine de: PrimeFaces-FontAwesome-Since v5.1.1

46
répondu Daniel 2015-01-20 14:41:17

Essayez cela, il a travaillé pour moi

.star {background:url("images/star.png") no-repeat !important;
     width:20px;
     height:16px;
    }
0
répondu maresca 2014-06-04 10:29:13