3

PrimeFacesは、jQueryテーマローラーから多くのアイコンを提供します。それらは便利ですが、アプリ用にカスタマイズされたアイコンが必要です。私が持っているとしましょう<p:commandButton>：

<p:commandButton icon="ui-icon ui-icon-check" />

私のCSSの知識は非常に限られているので、上記のボタンのラベルにカスタマイズされたアイコンを配置する方法を教えていただければ幸いです。

よろしくお願いします、

4

2 に答える 2

5

独自の css クラスを定義する必要があります。

.img-button-help { background-image: url('../images/help.png') !important; }

そして、あなたのでこのクラスを使用しますp:commandButton:

<p:commandButton icon="img-button-help" />
于 2012-06-20T13:23:08.643 に答える
1

jsf primefaces で独自の (ユーザー定義/カスタマイズされた) ui-icon を作成するには、次の手順に従います。

  1. 私のイメージ名は「pencilfour.png」で、webapp の resources フォルダー内に配置します。

  2. xhtml ページの「style」タグ内に新しい名前を付けて独自のアイコンを定義します。

    .uipencil アイコン { 

    width: 16px; 

    height: 16px;

    align:up;

    background-image: url(#{resource['img:pencilfour.png']})!important ; 
}

必要に応じて高さと高さを変更できます。

  1. 次に、コマンドボタンで定義済みのアイコンを使用できます
<p:commandButton 

icon="uipencil-icon"

    style="   vertical-align:middle;

    margin-right:10px;

  height:19px;

  width:19px;"

  </p:commandButton>

これは機能します。注意すべき唯一のことはurl: url(#{resource['img:pencilfour.png']})!important ; 、URLの正しい構文を提供することです。コマンドボタンで画像を取得するためのimpです:)

于 2017-04-06T08:04:45.367 に答える