自分のprimefaces p：commanButtonアイコン

Question

primefaces p：commandButtonに自分のアイコンを使用することはできません。私のコードは次のとおりです。

<p:commandButton value="Cancel" action="#{userBb.cancel()}" 
     icon="ui-icon-myCancel" /> 

CSSは次のとおりです。フォルダの

.ui-icon-myCancel{ 
    background-image: url(images/cancel_16.png) !important; 
} 

構造が普通である：

を私がしようとすると：

/resources/images/cancel_16.png

私が得る結果

.ui-state-default .ui-icon .ui-icon-myCancel{ 
    background-image: url(images/cancel_16.png) !important; 
} 

私が取得：

私は放火犯のレポートを見て、そこにあるセクションスパン

<span class="ui-button-icon-left ui-icon ui-c ui-icon-myCancel"></span> 

があります：

.ui-state-default .ui-icon { 
    background-image: url("/WarPort08_02b/javax.faces.resource/images/ui-icons_38667f_256x240.png.xhtml?ln=primefaces-aristo"); 

私はこのexplanationを見て、他の人が、何の答えを見つけていません。

私はp：commandLinkをh：graphicImageアイコンで表示しようとしていますが、画像はボタン/リンクとして表示されます。

Answer 1

Zbyszek、これらは以下の出力を得るために取った手順です。あなたのコメントに基づいて、私はそれがあなたの後にあると仮定しています。

注：マイピクチャの名前はtest.jpgだったし、次のディレクトリ resources/images/test.jpgにありました。 また、提供したスタイルルールはresources/css/style.cssに記載されています。私のイメージのサイズは25 x 17でした（しかし、私はそれが重要だとは思わない、あなたはアイコンが小さすぎると思っている場合に備えてこれを言っているだけです）。 <h:head>で

あなたが持っていることを確認します（たぶん、あなたはこれを追加するのを忘れやスタイルが適用されていませんでした？）

<h:outputStylesheet name="css/style.css" /> 

マイ< p:commandButton>（必要に応じて変更は、それだけで迅速なモックアップでした）

<p:commandButton value="Cancel" icon="ui-icon-myCancel" /> 

とあなたのルール

.ui-icon-myCancel{ 
    background-image: url("#{resource['images/test.jpg']}") !important; 
} 

Answer 2

このシンプルなURL（）バージョンもPrimefaces 6.1上で動作します：
.ui-icon-myCancel{background-image: url(img/cancel.gif)!important;}
（あなたは、Web/IMGフォルダにアイコンファイルを入れて、cssファイルは、Webフォルダにある場合）

しかし、それラウンドコーナーため、アイコンの私はこのソリューションを使用します：

.ui-icon-myCancel{background-image: url(img/cancel.gif)!important; 
        border-radius: 0px!important;}