Fancytree: implementing bootstrap skin

Question

I currently have a working fancytree that is using the Windows 7 skin css, but the rest of my application is based on the Bootstrap style. I am having trouble implementing the bootstrap skin to Fancytree. When I do (by replacing my win7 css file with the Bootstrap css file) my fancytree works, but it presents no icons for folders, checkboxes, etc. It's entirely blank space. The same thing happens for the other skins that are independent from a .gif image for the icons (bootstrap-n and awesome)

How do I go about implementing these skins? Am I missing something?

If it matters at all, I am using extensions: ["contextMenu", "dnd", "edit"]

Edit: Upon further tests I started to notice that when I refresh my page to see if any changes took effect, I see an icon on my tree for a split second before it loads. I managed to take a screenshot, but I don't think it's a bootstrap icon.

Maybe it's misaligned? Also, what can cause it to disappear? The way it behaves makes me think that it's overridden by background: none or something of the like, but the class of the <span> that the icon shows up in is fancytree-icon, and the only css available for that class is in my bootrap skin's css file, and I don't see any overriding happening there.

Answer 1

In order to use the bootstrap, font-awesome, and other glyph based themes, you should also include the ext-glyph extension.

Example here: http://wwwendt.de/tech/fancytree/demo/index.html#sample-ext-bootstrap.html

Answer 2

copy the icons classes from relevant file and paste it into the bottom of css file and also include image files in relevant folder you are using in project

please check your icon paths in google chrome console you will find something is missing. if icons image or font icons not missing.. it means some type of css background none or transparent class is overriding on your css for backgrounds working file

Answer 3

I had a similar problem.

Look at the invocation in the example. Apparently, you need to provide a map for the glyph to work. Here's what worked for me, using font-awesome.

  <script type="text/javascript">
    $j(function(){
        // Initialize Fancytree
        $j("#tree").fancytree({
            extensions: ["glyph"],
            checkbox: true,
            selectMode: 3,
            glyph: {
                map: {
                    doc: "fa fa-file-o",
                    docOpen: "fa fa-file-o",
                    checkbox: "fa fa-square-o",
                    checkboxSelected: "fa fa-check-square-o",
                    checkboxUnknown: "fa fa-square",
                    dragHelper: "fa arrow-right",
                    dropMarker: "fa long-arrow-right",
                    error: "fa fa-warning",
                    expanderClosed: "fa fa-caret-right",
                    expanderLazy: "fa fa-angle-right",
                    expanderOpen: "fa fa-caret-down",
                    folder: "fa fa-folder-o",
                    folderOpen: "fa fa-folder-open-o",
                    loading: "fa fa-spinner fa-pulse"
                }
            },
            source: { url: "/tree.json", cache: true },
            lazyLoad: function(event, ctx) {
                ctx.result = {url: "ajax-sub2.json", debugDelay: 1000};
            }
        });
    });
  </script>

To use glyphicons, swap in this map:

    map: {
        doc: "glyphicon glyphicon-file",
        docOpen: "glyphicon glyphicon-file",
        checkbox: "glyphicon glyphicon-unchecked",
        checkboxSelected: "glyphicon glyphicon-check",
        checkboxUnknown: "glyphicon glyphicon-share",
        dragHelper: "glyphicon glyphicon-play",
        dropMarker: "glyphicon glyphicon-arrow-right",
        error: "glyphicon glyphicon-warning-sign",
        expanderClosed: "glyphicon glyphicon-plus-sign",
        expanderLazy: "glyphicon glyphicon-plus-sign",  // glyphicon-expand
        expanderOpen: "glyphicon glyphicon-minus-sign",  // glyphicon-collapse-down
        folder: "glyphicon glyphicon-folder-close",
        folderOpen: "glyphicon glyphicon-folder-open",
        loading: "glyphicon glyphicon-refresh"
    }