PrimeFacesでui-iconの色を変更するにはどうしたらいいですか？

Question

JSF 2.2とPrimeFaces 6.0でWeb Javaアプリケーションを開発しています。私はp:treeを構築しています。たとえば、次の画像（テキストは打ち切り）でUIアイコンの色を変更したいと思います。

マイXHTMLコードは次のとおりです。

<p:tree value="#{docBean.root}" var="doc"> 
    <p:treeNode expandedIcon="ui-icon-folder-open" collapsedIcon="ui-icon-folder-collapsed"> 
     <h:outputText value="#{doc.name}" /> 
    </p:treeNode> 
</p:tree> 

私は

.ui-icon-folder-open{ 
    color: red; 
} 

...と試してみました...しかし、ただアイコンの背景が赤に変わりました。

ありがとうございました！

Answer 1

私にとっては、最も柔軟で簡単な解決策は、ノードにフォントのすばらしい「アイコン」を使用することです。効果的なアイコンではなく、名前としてのフォントです。したがって、これらのはをCSSで変更することができます。したがって、その人気とその理由included in PrimeFaces

PrimeFaces showcase for tree with iconsは、開いたノードと閉じたノードの両方、およびノー​​ドのカスタムアイコンを追加できることを示しています。幸いなことに、クライアント側で対応する属性に追加するすべてのものがhtmlの 'class'属性になり、属性に複数の空白値を追加できます。これはフォントのすごいニーズなので、expandedIcon="fa fa-folder-open"またはcollapsedIcon="fa fa-folder"を追加することで、適切なアイコンを手に入れることができ、デフォルトのスタイル.fa { color: orange}であなたが望むものを正確に得ることができます。変更された葉との完全な例では

このようなものになるだろう：

<style> 

    .fa { 
     color: orange; 
    } 

</style> 
<h:form> 
    <p:tree value="#{treeIconView.root}" var="doc"> 
     <p:treeNode expandedIcon="fa fa-folder-open" collapsedIcon="fa fa-folder"> 
      <h:outputText value="#{doc.name}"/> 
     </p:treeNode> 

     <p:treeNode type="document" icon="fa fa-file-o"> 
      <h:outputText value="#{doc.name}" /> 
     </p:treeNode> 

     <p:treeNode type="picture" icon="fa fa-file-picture-o"> 
      <h:outputText value="#{doc.name}" /> 
     </p:treeNode> 

     <p:treeNode type="mp3" icon="fa fa-file-video-o"> 
      <h:outputText value="#{doc.name}" /> 
     </p:treeNode> 
    </p:tree> 
</h:form> 

しかし、あなたはさらに多くのことを行くことができます。以下の画像を見て：

それは、次の例で生成されます

<style> 

    .fa { 
     color: orange; 
    } 

    .videoColor { 
     color: blue; 
    } 

    .colorOpen { 
     color: green; 
    } 

    .fa-file-picture-o { 
     color: purple; 
    } 

    .color30KB { 
     color: red; 
    } 

</style> 
<h:form> 
    <p:tree value="#{treeIconView.root}" var="doc"> 
     <p:treeNode expandedIcon="fa fa-folder-open colorOpen" collapsedIcon="fa fa-folder"> 
      <h:outputText value="#{doc.name}"/> 
     </p:treeNode> 

     <p:treeNode type="document" icon="fa fa-file-o"> 
      <h:outputText value="#{doc.name}" /> 
     </p:treeNode> 

     <p:treeNode type="picture" icon="fa fa-file-picture-o #{doc.size == '30 KB' ? 'color30KB' : '' }"> 
      <h:outputText value="#{doc.name}" /> 
     </p:treeNode> 

     <p:treeNode type="mp3" icon="fa fa-file-video-o videoColor"> 
      <h:outputText value="#{doc.name}" /> 
     </p:treeNode> 
    </p:tree> 
</h:form> 

あなたは、アイコンの属性で追加された「クラス」を追加することができますが、あなたはまた、FAクラスを使用することができますそれらはすでに追加されており、CSSセレクタでそれを使用したり、値に基づいてアイコンに特定の条件付きの 'クラス'を追加することができます。そして、CSSですべて変更できるので、色を変更するだけでなく、サイズ、回転、CSSのアニメーションなど、