在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没有{{1}像MenuItem这样的方法。

这是我的树代码：

setIcon

树形箭头图标：

Answer 1

试试我的FontAwesomeResourceHandler。

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

将此依赖项添加到{{1}}：

{{1}}

然后，在{{1}}中添加处理程序：

{{1}}

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

}