需要 Jstree css，它使用大黑箭头来打开和关闭节点，类似于下图答案

【问题标题】：Need Jstree css which uses big dark arrow for node open and close, similar to below picture需要 Jstree css，它使用大黑箭头来打开和关闭节点，类似于下图
【发布时间】：2018-05-08 05:40:54
【问题描述】：

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

https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js

有人可以帮我处理css，它使用黑色大箭头来打开和关闭节点，类似于下图..

Screenshot of jstree with big dark arrow, which i found online

Here is the fiddle, with big dark arrow -

http://jsfiddle.net/wqrmpb01/2/

【问题讨论】：

您可以使用font-awesome 图标来替换它。
Abinthaha@ - 你能举个例子吗？

标签： css jstree

【解决方案1】：

我希望你看起来像这样

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

<!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>

在这里，我没有使用 font-awesome，而是更改了背景图片。请检查代码并按照您想要的方式进行修改。

谢谢

【讨论】：