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

【问题标题】：JSTree Proton theme Change icon to folder open and closeJSTree Proton 主题更改图标为文件夹打开和关闭
【发布时间】：2017-07-28 01:50:00
【问题描述】：

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

我想在节点打开到文件夹打开和节点关闭到文件夹关闭时更改图标。

与以下相同。 Proton CMS ADMIN PANEL

检查那里的文档节点，它将图标更改为打开和关闭的文件夹。

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

这是它使用的精灵。

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

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

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

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

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

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

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

【问题讨论】：

标签： javascript css jstree

【解决方案1】：

我终于可以通过改变css中的背景位置来渲染图像了。

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

Sprite Cow

打开您的图像并选择部分。

之后我创建了单独的类并使用了背景位置 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;
}

【讨论】：