FancyTree: Adding a custom icon by HTML?

Question

I am using HTML to do the basic FancyTree initialization of a folder tree control and I was wondering if I could also specify a custom icon for these folders, i.e.,

<li id="xyz' class="folder" data-icon="myFolderIcon.gif">Folder Name

In the definition of my FancyTree control, I specify an imagePath:

$("#tree").fancytree({imagePath: "skin-win8/",

but all I see is an empty spot where my icon should appear, even though I placed my custom icon in the skin-win8 folder. What's the simplest way to add a custom icon or two to a FancyTree control? I'm both a FancyTree and CSS neophyte, in case you were wondering :)

Sheldon

score 2 · Answer 1 · answered Feb 18 '15 at 07:10

2

That looks ok to me. Basically the same as in this demo:

http://wwwendt.de/tech/fancytree/demo/sample-theming.html

Maybe simply a typo in your markup:

<li id="xyz' class="folder" data-icon="myFolderIcon.gif">Folder Name

(should be id="xyz" instead of id="xyz')

answered Feb 18 '15 at 07:10

mar10

14,320
5
39
64

Hi, Martin, thanks for your response. Unfortunately, the typo's only in my snippet, where I tried to use some dummy values to protect the guilty :) I don't know if you have any other troubleshooting tips, but I imagine it would be easier to debug/verify this if I did it in the **init** event handler. If nothing else, that would make it the same as your demo... – Sheldon R. Feb 18 '15 at 15:08

score 0 · Accepted Answer · edited May 23 '17 at 11:51

Thanks again to mar10 to pointing me in the right direction, even though his thought that I had a typo in my markup was not the actual culprit. But by saying that he didn't see anything wrong and referring me back to his demo for custom node icons, it got me thinking that perhaps I too was also experiencing an imagePath issue, like this previous custom-node question

So I went back to my FancyTree download and got the custom-node example working on my server, then I moved the page and its dependencies around till I got something similar to my situation. Once I had that working, I was able to use the same approach within my actual page...

I happen to keep all my FancyTree-related files in a directory called fancytree within my application's web folder, so I added a subfolder called custom there and set my imagepath in the following manner:

imagePath: "fancytree/custom/",

Once I did that, I was able to use my custom icon either by including it in the HTML definition of the node or by setting it within the Javascript function I used to initialize certain aspects of my tree. Hope this helps some other custom-node newcomer...

Sheldon

FancyTree: Adding a custom icon by HTML?

2 Answers2