23

他の場所で使用するためにicons、コンポーネントにあるような矢印を選択する方法が見つかりません。PickListCommandButtons

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

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

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

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

ただし、PickListコンポーネントとまったく同じ矢印を使用したいと思います。

4

3 に答える 3

48

ここに利用可能なすべてのjQueryUIアイコンのリストがあります

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

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

少なくとも、たとえば<p:commandLinkを使用してアイコンを適用できます（同じことを試してみることを忘れないでください-常に優先されます）styleClassstyleClass="ui-icon ui-icon-trash"p:commandButton<p:commandLink

ところで、属性<p:commandButtonはありません、持っています...outcome<p:button

さらに、PF v5.1.1以降、次のようにコンテキストパラメータをtrueに設定することで、FontAwesomeのアイコンをすぐに使用することもできます。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"/>

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

于 2012-04-14T09:57:45.970 に答える
31

Primefacesは、UIのスタイル設定にjQueryテーマローラーを使用します。Primefacesで使用されているアイコンはすべてそこからのものです。（themerollerで）好きなアイコンの上にマウスを置くだけで、：のようなもの.ui-icon-arrow-1-eがポップします。次に、次のように使用します。

<p:commandButton action="target" icon="ui-icon ui-icon-arrow-1-e" value="Arrow icon"/>
于 2012-04-14T08:30:10.977 に答える
0

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

.star {background:url("images/star.png") no-repeat !important;
     width:20px;
     height:16px;
    }
于 2014-06-04T10:29:13.383 に答える