Search code examples
javascriptsvgfontsfont-awesomedhtmlx

Need Font Awesome 5 Support for SVG with JS in DHTMLX

We have many sites whose Internet Explorer will not show web fonts (they are locked down by group policies). So they cannot see any font awesome icons in our DHTMLX app. This is a major issue for us. We have been waiting for Font Awesome 5 to be released because we have verified that their new SVG with JS approach works. FA5 is now released so we are trying to figure out how to incorporate it into DHTMLX.

This is what I've tried so far...

  • I placed the new font awesome 5 file fontawesome-all.js into the /dhtmlx/codebase/fonts/font_awesome/ folder.
  • Then I updated the reference to it in the page: <script defer src="/dhtmlx/codebase/fonts/font_awesome/fontawesome-all.js"></script>

Now the new font awesome 5 icons appear but I see double (2) of each for some reason. Any ideas? Thanks!

enter image description here

UPDATE: The bug appears to be in DHTMLX in the dhtmlXMenu.addNewSibling() method. If I remove the disabled image property (imgDis) then I only see one font awesome icon, great, but if I make that menu item disabled then I don't see any image. So it seems DHTMLX need to tweak their enabled/disabled functionality for FA5 icons.

Solution

  • I have the same problem. But I refused to set the property:

    myToolbar.setIconset ("awesome");

    I set the icon through the "text" property:

    "text": "<i class = 'fas fa-plus'> </ i>"

    and I define css for dhx_toolbar_btn, for example so:

    .dhx_toolbar_btn {
     color: # 557BA6;
     font-size: 1.6em;
}

    In this case, "disabled" works properly.

    I hope this helps.