在 PrimeFaces 中将图标从 jQuery UI 更改为 FontAwesome

Question

我有一个 PrimeFaces p:tree，我可以使用 this 添加字体很棒的展开和折叠图标，但在此之前有一个来自 PrimeFaces 的箭头图标，我无法弄清楚如何切换它字体很棒的箭头（fa-arrow-circle-down 和 fa-arrow-circle-right），或者将颜色更改为白色也足以满足我的需要。

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

我查看了here 的其他帖子，因为 PrimeFaces 使用的是图像，而 FontAwesome 是 CSS，我不确定如何替换箭头，TreeNode 没有像 MenuItem 这样的 setIcon 方法。

这是我的树代码：

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

树形箭头图标：

Answer 1

试试我的FontAwesomeResourceHandler。

此资源处理程序将从社区 PrimeFaces 主题中删除 jQuery UI 图标并将FontAwesome rules 添加到 主题。您可以在现有应用程序上使用它，而无需将所有 XHTML（例如 ui-icon-gear 转换为 fa fa-cog)。注入的 CSS 将 map all the UI icons.

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

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

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

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

Answer 2

我尝试的另一种方法是使用另一个带有白色图标箭头的 primefaces 主题的图标。如果您在另一个主题中为箭头图标找到正确的颜色，这只是另一种方式。否则，我会选择 Jasper 的解决方案来为自定义图像提供一个干净的解决方案。只是将其发布为另一种选择。

我正在使用 primefaces-aristo 并在 primefaces-black-tie 中找到了白色箭头图标，因此我用该主题图像覆盖了箭头图标。

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

}