Change icon from jQuery UI to FontAwesome in PrimeFaces

问题

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:

回答1:

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>

回答2:

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']}");

}

来源：https://stackoverflow.com/questions/43528966/change-icon-from-jquery-ui-to-fontawesome-in-primefaces

标签

css

primefaces

font-awesome