How to change the color of the ui icon in PrimeFaces?

Question

I am developing a Java Java application with JSF 2.2 and PrimeFaces 6.0. I create p:tree , and I would like to change the color of the ui icons, for example, in the following figure (text is censored).

My xhtml code:

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

I tried with ...

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

... but the right background of the icon has changed to red.

Thanks!

Answer 1

For me, the most flexible and easiest solution is to use font “icons” for nodes. They are not actually icons, but, as the name says, fonts. So these can be modified by css. Consequently, their popularity and why they are also included in PrimeFaces.

The PrimeFaces showcase for a tree with icons shows that you can add custom icons for nodes, both open and closed, as well as for leaves. Fortunately, everything you add to the corresponding attributes on the client side ends with the "class" attributes in html And you can add some space values ​​in attributes. This is what fonts need, so by adding expandedIcon="fa fa-folder-open" or collapsedIcon="fa fa-folder" , you can get the correct icons and the default .fa { color: orange} you get exactly what you want.

In the full example, the modified leaves will be something like this:

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

But you can go much further. Take a look at the following image:

It is created in the following example:

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

You can add additional “classes” to the attributes of the icons, but you can also use the fa classes already added and use them in the css selectors or add special conditional “classes” to the icons based on values, etc .... And since all this css can be changed, you can not only change the color, but also the size, rotation, css animation or whatever.