css 如何将分支节点原始树图标替换为+或-?

qmb5sa22  于 2023-02-26  发布在  其他
关注(0)|答案(2)|浏览(128)

Angular CLI版本6

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

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

ejk8hzay

ejk8hzay1#

从CSS你可以取代图标内容,以所需的图标内容.
要做到这一点,你必须观察当前的css类,当你展开和关闭你的p-tree
例如:
p-tree上树切换器的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,而不是所有的p-tree
要在扩展时替换为-,请使用:

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

以下是Font Awesome图标及其CSS内容值的列表:
http://astronautweb.co/snippet/font-awesome/

hi3rlvi2

hi3rlvi22#

为了使用此方法显示图标,还必须设置font-family属性。

相关问题