需要Jstree css，它使用大的黑色箭头来打开和关闭节点，如下图所示_Css_Jstree

需要Jstree css，它使用大的黑色箭头来打开和关闭节点，如下图所示

css

需要Jstree css，它使用大的黑色箭头来打开和关闭节点，如下图所示,css,jstree,Css,Jstree,我是jstree的新手。现在我正在使用下面的css和js来表示jstree，它使用32px.png来表示节点打开和节点关闭图标有人能帮我使用css吗？css使用大的黑色箭头来表示节点的打开和关闭，类似下图我希望你看起来像这样我可以添加下面的代码来实现这一点 <!DOCTYPE html> <html> <head> <title>JSTree</title> <link rel="styles

我是jstree的新手。现在我正在使用下面的css和js来表示jstree，它使用32px.png来表示节点打开和节点关闭图标

有人能帮我使用css吗？css使用大的黑色箭头来表示节点的打开和关闭，类似下图

我希望你看起来像这样

我可以添加下面的代码来实现这一点

<!DOCTYPE html>
<html>
<head>
    <title>JSTree</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    <style type="text/css">

        .jstree-node .jstree-icon.jstree-ocl {
            background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Angle_right_font_awesome.svg/512px-Angle_right_font_awesome.svg.png');
            background-size: 22px 22px;
            background-position: center !important;
            background-repeat: no-repeat;
            transition: all 0.3s ease;
        }
        .jstree-node.jstree-open .jstree-icon.jstree-ocl {
            transform: rotate(90deg);
        }

    </style>
</head>
<body>
    <h2>
        JSTree
    </h2>
    <div id="jstree_demo_div"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#jstree_demo_div').jstree({
                'core' : {
                    'data' : [
                       'Simple root node',
                       {
                         'text' : 'Root node 2',
                         'state' : {
                           'opened' : true,
                           'selected' : true
                         },
                         'children' : [
                           { 'text' : 'Child 1' },
                           'Child 2'
                         ]
                      }, {
                         'text' : 'Root node 3',
                         'state' : {
                           'opened' : false,
                           'selected' : false
                         },
                         'children' : [
                           { 'text' : 'Child 11' },
                           'Child 22'
                         ]
                      }
                    ]
                },
                "checkbox" : {
                    "keep_selected_style" : false
                },
                "plugins" : [ "wholerow" ]
            });
        })
    </script>
</body>
</html>

在这里，我没有使用字体，而是改变了背景图像。请检查代码并按您想要的方式修改它

谢谢

您可以使用字体很棒的图标来替换此图标。Abinthaha@-您能举个例子吗？

<!DOCTYPE html>
<html>
<head>
    <title>JSTree</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    <style type="text/css">

        .jstree-node .jstree-icon.jstree-ocl {
            background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Angle_right_font_awesome.svg/512px-Angle_right_font_awesome.svg.png');
            background-size: 22px 22px;
            background-position: center !important;
            background-repeat: no-repeat;
            transition: all 0.3s ease;
        }
        .jstree-node.jstree-open .jstree-icon.jstree-ocl {
            transform: rotate(90deg);
        }

    </style>
</head>
<body>
    <h2>
        JSTree
    </h2>
    <div id="jstree_demo_div"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#jstree_demo_div').jstree({
                'core' : {
                    'data' : [
                       'Simple root node',
                       {
                         'text' : 'Root node 2',
                         'state' : {
                           'opened' : true,
                           'selected' : true
                         },
                         'children' : [
                           { 'text' : 'Child 1' },
                           'Child 2'
                         ]
                      }, {
                         'text' : 'Root node 3',
                         'state' : {
                           'opened' : false,
                           'selected' : false
                         },
                         'children' : [
                           { 'text' : 'Child 11' },
                           'Child 22'
                         ]
                      }
                    ]
                },
                "checkbox" : {
                    "keep_selected_style" : false
                },
                "plugins" : [ "wholerow" ]
            });
        })
    </script>
</body>
</html>