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

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

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

我看着其他职位here因为PrimeFaces使用的图像和FontAwesome是CSS，我不知道如何更换箭头，TreeNode没有一个setIcon方法类似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>

树箭头图标：

来源

2017-04-20 Avinash Moram

@Kukeltje你对此有什么想法？ –

_“我不确定我是否可以在不创建或导入新图像的情况下更改图像的颜色。”_：您不能 – Kukeltje

_“Primefaces使用的图像和字体真棒是CSS”_都是'CSS'后者是字体 – Kukeltje

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

来源

2017-04-21 06:47:39

另一种方式我试图用从另一个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']}");

}

来源

2017-07-31 19:55:45

这是好的，如果它是一个图标。对于更多，它变得很麻烦 – Kukeltje

是真的，同意。这就是我接受Jaspers回答的原因:) –

:-)好的......没问题 – Kukeltje

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

回答

相关问题