Font Awesome icons not being rendered

[nickgogan]

Hello and thanks for providing this package! I ran into an issue when I tried using vis with the latest version of font awesome. The font-awesome icons are not being rendered when running through vis. Everything else seems to be ok though.

I'm running the latest Windows 10 and Chrome (IE and FF are also not rendering the icons). I created a minimal repo that showcases the bug - https://github.com/nickgogan/VisFA. Everything is in the index.html file, with the .min files providing the vis support. FA is linked in the html via a CDN.

[bluejoe2008]

hi, i used both vis.js and FontAwesome in my project(https://github.com/bluejoe2008/InteractiveGraph/blob/master/src/main/scripts/app/nav.ts), it is ok to show FontAwesome icons, i even built a toolbar in the application:)

        toolbar.addButton({
            icon: "fa fa-user-circle-o",
            checked: true,
            tooltip: "show faces",
            click: (checked: boolean) => { app.toggleFaces(checked); }
        });

rendering screen:

[nickgogan]

Sorry, I should have been more specific - I meant to say that it doesn't seem to work with font-awesome 5+. I see that you're using font-awesome 4.7.0 in your project, which worked for us as well. But, we have several components in our software that were upgraded to 5+ successfully, except for the one that uses vis. When I tried making a quick html page that used FA 5+ and vis 4.21.0, it didn't work

[manraf]

I second this issue. Not matter the font name I use, it won't work. I tried: "Font Awesome 5 Free", "Font Awesome 5 Light", "Font Awesome 5 Pro Solid" etc. but the icons just won't render...

[lenon]

I had the same problem and I fixed it by using face: '"Font Awesome 5 Free"' with double-quotes. The code concatenates face to form a font for canvas, that's why double-quotes are required:

https://github.com/almende/vis/blob/abaddc32d90bc88bb297c1a14d0c6e3ae16efa77/lib/network/modules/components/nodes/shapes/Icon.js#L97

[manraf]

Thank you, @lenon! This works perfectly.

As a side note, the different styles included in Pro can be selected by using '"Font Awesome 5 Pro Solid"', '"Font Awesome 5 Pro Regular"' and '"Font Awesome 5 Pro Light"'. I assume it works the same for e.g. '"Font Awesome 5 Free Brands"'.

[nickgogan]

Thanks for the replies, everyone!

It turns out that, for us, the issue was not having FA Pro lol. When a given icon is not selected, it defaults to the regular/unfilled version of itself. And, for some icons, this regular version is actually only available in Pro. Like @lenon indicates above, setting the font-weight attribute is what selects which icon type will be rendered. For us, the fix was to alter the minified vis code to only display the solid icon, i.e.
ctx.font = (selected ? "bold " : "bold") + iconSize + "px " + this.options.icon.face;