jquery-ui - PrimeFaces 图标

Question

我找不到icons像PickList组件中那样选择箭头的方法，以便在其他CommandButtons.

好吧，我知道要在 CommandButton 中使用图标，必须遵循以下说明：

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

在 css 文件中定义了星形图标：

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

但我更愿意使用与 PickList 组件完全相同的箭头。

score 48 · Accepted Answer

这里是所有可用 jQuery UI 图标的列表

jQueryUI Icons Cheatsheet N#1（点击Toggle text获取所有图标名称）

至少在您可以使用例如<p:commandLink应用图标（不记得尝试相同- 总是首选）styleClassstyleClass="ui-icon ui-icon-trash"p:commandButton<p:commandLink

顺便说一句，<p:commandButton没有outcome属性，<p:button有它...

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

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

score 31 · Accepted Answer

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

score 0 · Accepted Answer

试试这个它对我有用

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

3 回答 3