Change icon from jQuery UI to FontAwesome in PrimeFaces

Question

I have a PrimeFaces p:tree and I was able to add font awesome expanded and collapsed icons using this, but there is an arrow icon before that which is from PrimeFaces and I was not able to figure out how to switch it font awesome arrows (fa-arrow-circle-down and fa-arrow-circle-right), or changing the color to white also suffices my need.

I have looked at the Firebug and found that the PrimeFaces arrow is from an image url("/permitweb-1.0/faces/javax.faces.resource/images/ui-icons_616161_256x240.png?ln=primefaces-aristo") I am not sure I can change the color of the image without creating or importing a new image.

I looked at other posts here because PrimeFaces was using an image and FontAwesome is CSS, I am not sure how to replace the arrow, TreeNode doesn't have a setIcon method like MenuItem.

Here is my tree code:

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

Tree arrow icon:

_"I am not sure I can change the color of the image without creating or importing a new image."_ : you can't — Kukeltje, Apr 20 '17 at 21:08
_" Primefaces was using an image and font awesome is css"_ both are 'css' the latter is a font — Kukeltje, Apr 20 '17 at 21:09
Solution, create more specific css selectors that hide the image AND add the same code that would be used if the fa-icon would be appLied. All just css (sorry no time or urge to try this the coming days, maybe next week) — Kukeltje, Apr 20 '17 at 21:19

score 1 · Accepted Answer · answered Apr 21 '17 at 06:47

Try my FontAwesomeResourceHandler.

This resource handler will strip the jQuery UI icons from the community PrimeFaces themes and adds FontAwesome rules to the theme. You can use it on existing applications without needing to convert all XHTML (for example ui-icon-gear to fa fa-cog). The injected CSS will map all the UI icons.

Add this dependency to your pom.xml:

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

Then, in the faces-config.xml, add the handler:

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

Avinash Moram · Answer 2 · 2017-09-01T15:12:56.240

0

Another way I tried was using the icons from another primefaces theme which has white icon arrows. This is just another way if you find the right color for your arrow icons in another theme. Otherwise I would go for Jasper's solution for a clean one for a custom image. Just posting this an another alternative.

I am using primefaces-aristo and found white arrow icons in primefaces-black-tie, so I override the arrow icons with that theme image.

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

}

edited Sep 01 '17 at 15:12

answered Jul 31 '17 at 19:55

Avinash Moram

67
2
13

This is fine if it is for one icon. For more it becomes cumbersome – Kukeltje Sep 02 '17 at 09:11
true, agree. That is the reason I accepted Jaspers answer as the accepted one :) – Avinash Moram Sep 04 '17 at 15:39

Change icon from jQuery UI to FontAwesome in PrimeFaces

2 Answers2

Linked