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获取图标的所有名称）

jQueryUI Icons Cheatsheet N#2

至少在<p:commandLink中，您可以使用styleClass来应用图标，例如styleClass="ui-icon ui-icon-trash"（不记得在p:commandButton上尝试相同 - 始终首选{{1} }）

B.T.W，<p:commandLink没有<p:commandButton属性，outcome有...

---

此外自PF v5.1.1起，您还可以使用开箱即用的Font Awesome图标，将<p:button上下文参数设置为true，就像这样< / p>

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

请参阅showcase：PrimeFaces - FontAwesome - Since v5.1.1

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

Answer 3

试试这个对我有用

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