如何更改 primeNg 树中树节点图标的颜色？答案

【问题标题】：how do I change the color for a tree node icon in a primeNg tree?如何更改 primeNg 树中树节点图标的颜色？
【发布时间】：2019-01-15 03:37:50
【问题描述】：

我在 Angular CLI 6 项目中使用 primeNg 树。

"primeicons": "^1.0.0-beta.9",
"primeng": "6.0.1",
"font-awesome": "^4.7.0",

我需要做的是更改一些treeNode 图标颜色。我需要一个蓝色的检查标志...

我正在使用 styleClass 参数并设置颜色：蓝色和图标和文本显示为蓝色。

如何更改图标颜色。

                {
                    label: 'Procedure is an isolated CABG Surgery',
                    icon: 'fa fa-folder',
                    // collapsedIcon: 'fa fa-folder',
                    // expandedIcon: 'fa fa-folder-open',
                    styleClass: 'xxx',
                },

在css文件中，我有

.xxx {
color: blue;

}

想法？

【问题讨论】：

标签： css angular font-awesome primeng

【解决方案1】：

只需在您的 CSS 中添加以下内容：

::ng-deep .ui-tree-container .ui-tree-toggler{
color: #f9c71a;


}


::ng-deep .ui-tree-container .ui-treenode-icon{
    color: #f9c71a;
  }

  ::ng-deep .fa-caret-right::before {
     content: "\F067";
  }

  ::ng-deep .fa-caret-down::before {
     content: "\F068";
  }

【讨论】：

【解决方案2】：

我最终做的是

icon: 'fa fa-check',

我加了

.fa-check:before {
    color: green;
}

一切都很好......

【讨论】：

以防万一您删除的帖子> 对于 p-tree> 如何使第一个节点变为粗体。这是答案。 :host::ng-deep { .parenttree { tbody tr td:first-child .ui-treenode-label { font-weight: bold; } } } 在 HTML 标签中添加一个名为 `parenttree' 的 styleClass。