如何在PrimeFaces中更改UI圖標的顏色？

Question

我正在開發一個帶有JSF 2.2和PrimeFaces 6.0的Web Java應用程序。我正在構建一個p:tree，我想更改ui-icons顏色，例如，在下一張圖片中（文本正在審查）。

我的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> 

您可以添加額外的「類」的圖標的屬性，但你也可以使用發班那些已經添加並在CSS選擇器中使用它，或者你可以在基於值等的圖標中添加特定的條件'類'...因爲它可以通過CSS來改變，你不僅可以改變顏色，還可以大小，旋轉，CSS動畫或其他。