アイコンをjQuery UIからPrimeFacesのFontAwesomeに変更

Question

私はPrimeFaces p:treeを持っていて、thisを使ってフォントの拡張と折りたたみアイコンを追加することはできましたが、PrimeFacesの矢印アイコンが前にありますそれは素晴らしいフォント（fa-arrow-circle-downとfa-arrow-circle-right）、または色を白に変更するフォントを切り替える方法を把握も私の必要性で十分です。

私はFirebugを見て、PrimeFacesの矢印が画像のものであることを発見しました。url("/permitweb-1.0/faces/javax.faces.resource/images/ui-icons_616161_256x240.png?ln=primefaces-aristo")新しい画像を作成したりインポートしたりせずに画像の色を変えることができるかどうかはわかりません。

PrimeFacesの画像を使用していたので、私は他の記事でhereを見て、FontAwesomeはCSSで、私は矢印を交換する方法がわからないです、TreeNodeはMenuItemようsetIcon方法を持っていません。ここで

は私の木のコードです：

<p:tree selectionMode="single"> 
    <p:treeNode expandedIcon="fa fa-folder-open" collapsedIcon="fa fa-folder"> 
    <h:outputText value="Home" /> 
    </p:treeNode> 
    <p:treeNode type="document" icon="fa fa-file-text-o fileColor"> 
    <h:outputText value="Staff" /> 
    </p:treeNode> 
</p:tree> 

ツリー矢印アイコン：

Answer 1

私FontAwesomeResourceHandlerを試してみてください。

このリソースハンドラは、コミュニティのPrimeFacesテーマからjQuery UIアイコンを削除し、FontAwesome rulesに のテーマを追加します。すべてのXHTMLを変換することなく既存のアプリケーションで使用することができます（たとえばui-icon-gear〜 fa fa-cog）。注入されたCSSはmap all the UI iconsになります。

あなたpom.xmlにこの依存関係を追加します。

<dependency> 
    <groupId>com.github.jepsar</groupId> 
    <artifactId>primefaces-theme-jepsar</artifactId> 
    <version>0.9.1</version> 
</dependency> 

その後、faces-config.xmlで、ハンドラを追加します。

<application> 
    <resource-handler>org.jepsar.primefaces.theme.jepsar.FontAwesomeResourceHandler</resource-handler> 
</application> 

Answer 2

私は白を持つ別のprimefacesのテーマからアイコンを使用していたみました別の方法をアイコンの矢印。これは別のテーマであなたの矢印アイコンに適した色を見つけたら、別の方法です。さもなければ私はジャスパーのソリューションのためにきれいなカスタム画像のために行くだろう。これをもう1つの選択肢として投稿するだけです。

私はprimefaces-aristoを使用しており、primefaces-black-tieに白い矢印アイコンがあるので、そのテーマイメージで矢印アイコンを無効にします。

.navTree > .ui-treenode-content > .ui-tree-toggler { 
background-image: url("#{resource['primefaces-black-tie:images/ui-icons_ededed_256x240.png']}"); 

}