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

Question

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

12

我正在使用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;
}

...但是"just"图标的背景变成了红色。

谢谢！

- Juan Camacho

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kukeltje · Accepted Answer

对我来说，最灵活、最简单的解决方案是使用font-awesome 'icons'作为节点的图标。它们实际上不是图标，而是字体。因此，这些图标可以通过css进行更改。这也是它们受欢迎的原因，也是为什么它们被包含在PrimeFaces中。

PrimeFaces展示树形图标表明，您可以为节点添加自定义图标，包括打开和关闭的节点以及叶子节点。幸运的是，您在客户端添加到相应属性中的所有内容都会出现在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>

但是你可以走得更远。看看下面的图片：

它是用以下示例生成的：

<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类，并在css选择器中使用它，或者根据值等添加特定的条件性“类”在图标中... 而且由于所有这些都可以通过css更改，你不仅可以更改颜色，还可以更改大小、旋转、css动画或其他内容。