Jsf 如何更改用户界面图标'；脸上的颜色是什么？

我正在用JSF2.2和PrimeFaces 6.0开发一个Web Java应用程序。我正在构建一个

p:tree

，我想更改ui图标的颜色，例如，在下一张图片中（文本正在审查）

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

…但刚刚的图标背景变为红色

---

谢谢大家!

对我来说，最灵活、最简单的解决方案是在节点上使用“图标”。它们不是有效的图标，而是名称所述的字体。因此，css可以更改这些。因此它们很受欢迎，为什么它们也很受欢迎

显示您可以为节点添加自定义图标，包括打开和关闭的节点以及叶子。幸运的是，客户端在相应属性中添加的所有内容都会在html的“class”属性中结束，您可以在属性中添加多个空白值。这就是font awesome所需要的，因此通过添加

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>

fa{
颜色：橙色；
}

但你可以走得更远。请看下图：

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

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

fa{
颜色：橙色；
}
.videoColor{
颜色：蓝色；
}
.colorOpen{
颜色：绿色；
}
.fa-file-picture-o{
颜色：紫色；
}
.30KB{
颜色：红色；
}

---

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

它的ui图标和fa图标非常不同。非常感谢你！有了这么多的感谢，为什么不把答案也投上一票呢；-）如果你被一个满是UI图标的现有项目“卡住了”，你可以尝试在这个答案有很多向上投票的情况下，不加评论地对其进行向下投票

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