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

mwngjboj 于 2023-04-01 发布在其他

关注(0)|答案(3)|浏览(376)

我在一个angular CLI 6项目中使用primeNg树。

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

我需要做的是改变一些树节点图标的颜色。我需要有一个蓝色的选中标志...
我使用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

来源：https://stackoverflow.com/questions/51737071/how-do-i-change-the-color-for-a-tree-node-icon-in-a-primeng-tree

3条答案

按热度按时间

ni65a41a1#

我最后做的是

icon: 'fa fa-check',

我补充道

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

一切都很好

赞(0）回复(0）举报 2023-04-01

odopli942#

在你的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";
  }

赞(0）回复(0）举报 2023-04-01

1rhkuytd3#

如在此LINK中提到的
尝试直接在JSON树上使用css

赞(0）回复(0）举报 2023-04-01