首页 > 解决方案 > 如何更改 primeNg 树中树节点图标的颜色?

问题描述

我在 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;

}

想法?

标签: cssangularfont-awesomeprimeng

解决方案


只需在您的 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";
  }

推荐阅读