在PrimeFaces中将图标从jQuery UI更改为FontAwesome [英] Change icon from jQuery UI to FontAwesome in PrimeFaces

问题描述

我有一个PrimeFaces p:tree，并且能够使用

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.

我查看了Firebug，发现PrimeFaces箭头来自图像.url("/permitweb-1.0/faces/javax.faces.resource/images/ui-icons_616161_256x240.png?ln=primefaces-aristo")我不确定是否可以在不创建或导入新图像的情况下更改图像的颜色.

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.

我在此处中查看了其他帖子，因为PrimeFaces是使用图像并且FontAwesome是CSS，我不确定如何替换箭头，TreeNode没有像

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.

这是我的树代码:

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

树形箭头图标:

推荐答案

尝试我的 FontAwesomeResourceHandler .

此资源处理程序将从社区PrimeFaces主题中剥离jQuery UI图标，并添加映射所有UI图标.

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.

将此依赖项添加到您的pom.xml:

Add this dependency to your pom.xml:

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

然后在faces-config.xml中添加处理程序:

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

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

这篇关于在PrimeFaces中将图标从jQuery UI更改为FontAwesome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！