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

Question

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

我想将节点打开时的图标更改为文件夹打开，节点关闭时的图标更改为文件夹关闭。

同下。 Proton CMS ADMIN PANEL

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

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

这是它使用过的精灵。

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

用于该图标的名称或 css class 是什么？

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

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

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

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

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

Answer 1

最后我能够通过在 css 中更改背景位置来渲染图像。

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

Sprite Cow

打开您的图片和 select 部分。

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

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

JSTree Proton theme Change icon to folder open and close

javascript

css

jstree