PrimeFaces图标

Question

我找不到icons像PickList组件中存在的那样选择箭头的方法,以便在其他方面使用它们CommandButtons.

好吧,我知道为了在CommandButton中使用图标,必须遵循以下指示:

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

已经在css文件中定义了星形图标:

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

但我更喜欢使用与PickList组件完全相同的箭头.

Answer 1

这里列出了所有可用的jQuery UI图标

jQueryUI Icons Cheatsheet N#1(点击Toggle text获取图标的所有名称)

至少在<p:commandLink你可以使用styleClass例如图标styleClass="ui-icon ui-icon-trash"(不记得尝试相同p:commandButton- 总是首选<p:commandLink)

BTW,<p:commandButton没有outcome属性,<p:button有它......

此外,从PF v5.1.1开始,你也可以使用开箱即用的Font Awesome图标,通过将primefaces.FONT_AWESOME上下文参数设置为true ,就像这样

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

并像这样使用它:

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

要么

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

Answer 2

Primefaces使用jQuery themeroller来设置UI样式.Primefaces中所有使用过的图标都来自那里.只需鼠标悬停你喜欢的图标(在themeroller中)和类似的东西:.ui-icon-arrow-1-e会弹出.然后像这样使用它:

<p:commandButton action="target" icon="ui-icon ui-icon-arrow-1-e" value="Arrow icon"/>