jsf - 如何在PrimeFaces中更改ui-icon的颜色？

Question

我正在使用JSF 2.2和PrimeFaces 6.0开发Web Java应用程序。我正在构建p:tree，并且想要更改ui-icons颜色，例如，在下一张图片中(文本正在检查)。



我的xhtml代码是:

<p:tree value="#{docBean.root}" var="doc">
    <p:treeNode expandedIcon="ui-icon-folder-open" collapsedIcon="ui-icon-folder-collapsed">
        <h:outputText value="#{doc.name}" />
    </p:treeNode>
</p:tree>

我尝试过...

.ui-icon-folder-open{
    color: red;
}

...但是正义图标的背景变为红色。

谢谢!

Answer 1

对我来说，最灵活，最简单的解决方案是为节点使用 Font Awesome 的“图标”。它们实际上不是图标，而是名称，字体。因此，这些可以由CSS更改。因此，它们的受欢迎程度以及它们为什么也是included in PrimeFaces

PrimeFaces showcase for tree with icons显示您可以为节点添加自定义图标，包括打开和关闭的节点以及叶子。幸运的是，您在客户端的相应属性中添加的所有内容最终都将成为html上的“类”属性，并且您可以在属性中添加多个空格值。这就是超棒的字体所需要的，因此，通过添加expandedIcon="fa fa-folder-open"或collapsedIcon="fa fa-folder"，您可以获得正确的图标，并且使用.fa { color: orange}的默认样式，您将获得所需的内容。



在一个完整的示例中，更改叶子将是这样的:

<style>

    .fa { 
        color: orange;
    }

</style>
<h:form>
   <p:tree value="#{treeIconView.root}" var="doc">
        <p:treeNode expandedIcon="fa fa-folder-open" collapsedIcon="fa fa-folder">
            <h:outputText value="#{doc.name}"/>
        </p:treeNode>

        <p:treeNode type="document" icon="fa fa-file-o">
            <h:outputText value="#{doc.name}" />
        </p:treeNode>

        <p:treeNode type="picture" icon="fa fa-file-picture-o">
            <h:outputText value="#{doc.name}" />
        </p:treeNode>

        <p:treeNode type="mp3" icon="fa fa-file-video-o">
            <h:outputText value="#{doc.name}" />
        </p:treeNode>
    </p:tree>
</h:form>

但是您可以走得更远。看下图:



它是通过以下示例生成的:

<style>

    .fa { 
        color: orange;
    }

    .videoColor {
        color: blue;
    }

    .colorOpen {
        color: green;
    }

    .fa-file-picture-o {
        color: purple;
    }

    .color30KB {
        color: red;
    }

</style>
<h:form>
    <p:tree value="#{treeIconView.root}" var="doc">
        <p:treeNode expandedIcon="fa fa-folder-open colorOpen" collapsedIcon="fa fa-folder">
            <h:outputText value="#{doc.name}"/>
        </p:treeNode>

        <p:treeNode type="document" icon="fa fa-file-o">
            <h:outputText value="#{doc.name}" />
        </p:treeNode>

        <p:treeNode type="picture" icon="fa fa-file-picture-o #{doc.size == '30 KB' ? 'color30KB' : '' }">
            <h:outputText value="#{doc.name}" />
        </p:treeNode>

        <p:treeNode type="mp3" icon="fa fa-file-video-o videoColor">
            <h:outputText value="#{doc.name}" />
        </p:treeNode>
    </p:tree>
</h:form>

您可以在icon属性中添加其他“类”，但是您也可以使用已经添加的fa类，并在css选择器中使用它，或者您可以基于值等在图标中添加特定的条件“类”。而且由于可以通过css更改所有内容，因此您不仅可以更改颜色，还可以更改大小，旋转，css动画等。