JSTree Proton主题更改图标到文件夹打开和关闭

Question

我只有一个演示应用程序，其中使用了具有质子主题的JSTree。

我希望在节点打开文件夹打开以及节点关闭到文件夹关闭时更改图标。

同样如下。 Proton CMS ADMIN PANEL

检查文档节点，将文件夹更改为文件夹打开和关闭。

现在，当我尝试更改图标时，我发现它正在使用CSS Sprites，当我检查style.css时，我发现它还使用base64 url​​来加载一些图像。

这是它使用过的精灵。

如何在节点中使用该目录打开和关闭图标？

该图标使用的名称或css类是什么？

当我们有sprite时我们如何找到图标名称并加载它？

除此之外，我还想使用填充的方块作为叶节点图标。

我可以使用以下精灵代码渲染该图像。

.jstree-folder-open {
background: url('32px.png') no-repeat -531px -23px !important;
}

但仍然无法以正确的尺寸和正确的方式显示图标。有什么特别的方法吗？

Answer 1

最后我只能通过改变css中的背景位置来渲染图像。

这是我找到用于从精灵渲染图像的css代码的工具。

Sprite Cow

打开图像并选择部分。

之后我刚刚创建了单独的类并使用了background-position css。

.jstree-folder-open {
background-image: url('32px.png') !important;
background-position: -105px -70px !important;
}

.jstree-folder-closed {
background-image: url('32px.png') !important;
background-position: -261px -7px !important;
}

li.jstree-leaf > a > i.jstree-icon {
background-image: url('32px.png') !important;
background-position: -200px -7px !important;
}