Angular CLI版本6
"primeicons": "^1.0.0-beta.9", "primeng": "6.0.1", "font-awesome": "^4.7.0",
我正在尝试将树节点的默认图标更改为+和-。我在这里看到了建议的解决方案,但我认为它们必须用于旧版本的库,因为它不起作用。对此有何指导意见?
ejk8hzay1#
从CSS你可以取代图标内容,以所需的图标内容.要做到这一点,你必须观察当前的css类,当你展开和关闭你的p-tree。例如:p-tree上树切换器的CSS类为:.ui-treetable-toggler且图标类正常位置为:fa-caret-right,内容类为:fa-caret-right:before因此,要将其替换为+,您必须使用以下CSS:
p-tree
.ui-treetable-toggler
fa-caret-right
fa-caret-right:before
+
.your-tree-table-class .ui-treetable-toggler.fa-caret-right:before{ content: "\f067"; }
注意,我使用了自己的CSS类your-tree-class,这样它只影响特定的p-tree,而不是所有的p-tree。要在扩展时替换为-,请使用:
your-tree-class
-
.your-tree-table-class .ui-treetable-toggler.fa-caret-down:before{ content: "\f068"; }
以下是Font Awesome图标及其CSS内容值的列表:http://astronautweb.co/snippet/font-awesome/
hi3rlvi22#
为了使用此方法显示图标,还必须设置font-family属性。
2条答案
按热度按时间ejk8hzay1#
从CSS你可以取代图标内容,以所需的图标内容.
要做到这一点,你必须观察当前的css类,当你展开和关闭你的
p-tree
。例如:
p-tree
上树切换器的CSS类为:.ui-treetable-toggler
且图标类正常位置为:fa-caret-right
,内容类为:fa-caret-right:before
因此,要将其替换为
+
,您必须使用以下CSS:注意,我使用了自己的CSS类
your-tree-class
,这样它只影响特定的p-tree
,而不是所有的p-tree
。要在扩展时替换为
-
,请使用:以下是Font Awesome图标及其CSS内容值的列表:
http://astronautweb.co/snippet/font-awesome/
hi3rlvi22#
为了使用此方法显示图标,还必须设置font-family属性。