如何将一个分支节点的primeNg树图标替换为+或-？

Question

角度CLI版本6

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

我正在尝试将树节点的默认图标更改为+和-。 我在这里看到了建议的解决方案，但我认为对于旧版本的库，它们必须解决，因为它不起作用。

对此有任何指导吗？

Answer 1

从CSS中，您可以将Icon内容替换为所需的图标内容。

为此，您必须观察在展开和关闭时应用于p-tree的当前CSS类。

例如：

p-tree上的Tree Toggler的CSS类为：.ui-treetable-toggler 图标类的常规位置是：fa-caret-right，内容类是：fa-caret-right:before

因此，要用+替换它，您将必须使用以下CSS：

.your-tree-table-class .ui-treetable-toggler.fa-caret-right:before{
  content: "\f067";
}

请注意，我已经将自己的CSS类用作your-tree-class，因此它仅影响特定的p-tree。并非所有人。

并在扩展使用范围时替换为-：

.your-tree-table-class .ui-treetable-toggler.fa-caret-down:before{
  content: "\f068";
}

这是Font Awesome Icons及其CSS内容值的列表：
http://astronautweb.co/snippet/font-awesome/