web-dev-qa-db-ja.com

PrimeFacesアイコン

他のiconsで使用するために、PickListコンポーネントにあるような矢印CommandButtonsを選択する方法を見つけることができません。

さて、CommandButtonでアイコンを使用するには、次の指示に従う必要があることを知っています。

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

cssファイルでスターアイコンを定義した場合：

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

ただし、PickListコンポーネントとまったく同じ矢印を使用することをお勧めします。

jquery-uijsfprimefaces
23
perissf

PrimefacesはUIのスタイリングに jQuery themeroller を使用します。 Primefacesで使用されるすべてのアイコンはそこからのものです。好きなマウスオーバーアイコン（themeroller内）と次のようなもの：.ui-icon-arrow-1-eポップします。次に、次のように使用します。

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

ここで利用可能なすべてのjQuery UIアイコンのリスト

jQueryUIアイコンチートシートN＃1 （クリックToggle textアイコンのすべての名前を取得します）

jQueryUIアイコンチートシートN＃2

少なくとも<p:commandLinkstyleClassを使用してアイコンを適用できます。たとえばstyleClass="ui-icon ui-icon-trash"（同じことをp:commandButton-常に優先<p:commandLink）

B.T.W、<p:commandButtonにはoutcome属性がありません、<p:buttonそれを持っている...

さらに PF v5.1.1以降では、 Font Awesome のアイコンも使用できます。trueに設定すると、primefaces.FONT_AWESOME context param、このように

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

ショーケースを参照してください： PrimeFaces-FontAwesome-v5.1.1以降

47
Daniel

これを試してみてください

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