Question

我正在使用JSF 2.2和PrimeFaces 6.0开发Web Java应用程序。我正在构建一个SELECT city, state, latitudes, longitudes, SQRT(POWER(-122.406417-longitudes,2) + POWER(37.785834 - latitudes,2)) as area FROM zips ORDER BY area limit 5，我想更改ui-icons颜色，例如，在下一张图片中（文本是审查）。

我的xhtml代码是：

<base href="/">

我试过......

p:tree

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

谢谢！

Answer 1

对我来说，最灵活，最简单的解决方案是使用字体真棒＆＃39;图标＆＃39;对于节点。它们不是有效的图标，但正如名称所示，字体。所以这些可以由css改变。因此他们的受欢迎程度以及为什么他们也included in PrimeFaces

PrimeFaces showcase for tree with icons表示您可以为节点添加自定义图标，包括打开和关闭节点以及叶子。幸运的是，您在相应属性客户端添加的所有内容最终都会出现在＆＃39; class＆＃39; html上的属性和你可以在属性中添加多个空格值。这就是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>

您可以添加其他类别＆＃39;在图标属性中，您也可以使用已添加的fa类并在css选择器中使用它，或者您可以添加特定的条件类＆＃39;在基于值等的图标中...由于它可以全部由css更改，您不仅可以更改颜色，还可以更改大小，旋转，CSS动画或其他任何内容。

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

1 个答案: