vis.js and fontawesome glyph icons

While creating graphs using vis.js we can specify how the nodes can be displayed using the options.

var options = {
  width: '400px',
  height: '400px',
  edges:{
    style:'arrow'
  },
  nodes:{
    shape:'icon'
  }
};

by using 'icon' for style we use either bootstrap or fontawesome glyph icons. The documentation talks about using unicodes.

Created a Plunker and the Icons are not showing up.

http://plnkr.co/edit/DFYz26SOxGY9IvMqSuKm?p=preview

Not sure what i am doing wrong.

Thanks

I took a look at your plunker and I fixed it here:

http://plnkr.co/edit/NQarGkQSYeg3Cl0SdBGy?p=preview

I'm one of the devs of vis.js and I'd like to explain what went wrong here. First, you will need to include the css of fontawesome so vis knows where to find the glyphs. So we add: < link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Second, going by your plunker, you set the shape of the nodes to 'circle'. That means the nodes will not care about the icon options. In your question you have set the node shape to 'icon'. This means, the node will use the additional icon options for configuring the icons.

So we added (to the global nodes options):
iconFontFace:'FontAwesome',
iconSize:50

Now for the unicode. You will need to specify which icon vis is supposed to show you. This is done by the icon option. So where do we find the unicode? Lets look at this example: http://fortawesome.github.io/Font-Awesome/icon/coffee/ and we find:

fa-coffee  · Unicode: f0f4 · Created: v3.0 · Categories: Web Application Icons

So the unicode is f0f4 and in javascript we write this as

\uf0f4

From your problem I noticed there are no default settings for the icons, which will be fixed with the 4.0 release.

For further reference you can take a look at the docs:

http://visjs.org/docs/network.html#Nodes_configuration

a working example with multiple icons from fontawesome and Ionicons:

http://visjs.org/examples/network/38_node_as_icon.html

To wrap up, next time you have an issue, please post it in our Github page, we try to collect all the questions there :)

https://github.com/almende/vis/issues

Good luck!