<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Network | node as icon</title> <script type="text/javascript" src="../../dist/vis.js"></script> <link href="../../dist/vis.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <script language="JavaScript"> function draw() { /* * Example for FontAwesome */ var optionsFA = { height: '300px', groups: { usergroups: { shape: 'icon', iconFontFace: 'FontAwesome', icon: '\uf0c0', iconSize: 50, iconColor: '#57169a' }, users: { shape: 'icon', iconFontFace: 'FontAwesome', icon: '\uf007', iconSize: 50, iconColor: '#aa00ff' } } }; // create an array with nodes var nodesFA = [{ id: 1, label: 'User 1', group: 'users' }, { id: 2, label: 'User 2', group: 'users' }, { id: 3, label: 'Usergroup 1', group: 'usergroups' }, { id: 4, label: 'Usergroup 2', group: 'usergroups' }, { id: 5, label: 'Organisation 1', shape: 'icon', iconFontFace: 'FontAwesome', icon: '\uf1ad', iconSize: 50, iconColor: '#f0a30a' }]; // create an array with edges var edges = [{ from: 1, to: 3 }, { from: 1, to: 4 }, { from: 2, to: 4 }, { from: 3, to: 5 }, { from: 4, to: 5 }]; // create a network var containerFA = document.getElementById('mynetworkFA'); var dataFA = { nodes: nodesFA, edges: edges }; var networkFA = new vis.Network(containerFA, dataFA, optionsFA); /* * Example for Ionicons */ var optionsIO = { height: '300px', groups: { usergroups: { shape: 'icon', iconFontFace: 'Ionicons', icon: '\uf47c', iconSize: 50, iconColor: '#57169a' }, users: { shape: 'icon', iconFontFace: 'Ionicons', icon: '\uf47e', iconSize: 50, iconColor: '#aa00ff' } } }; // create an array with nodes var nodesIO = [{ id: 1, label: 'User 1', group: 'users' }, { id: 2, label: 'User 2', group: 'users' }, { id: 3, label: 'Usergroup 1', group: 'usergroups' }, { id: 4, label: 'Usergroup 2', group: 'usergroups' }, { id: 5, label: 'Organisation 1', shape: 'icon', iconFontFace: 'Ionicons', icon: '\uf276', iconSize: 50, iconColor: '#f0a30a' }]; // create a network var containerIO = document.getElementById('mynetworkIO'); var dataIO = { nodes: nodesIO, edges: edges }; var networkIO = new vis.Network(containerIO, dataIO, optionsIO); } </script> </head> <body onload="draw()"> <h2> <i class="fa fa-flag"></i> Use FontAwesome-icons for node</h2> <div id="mynetworkFA"></div> <h2> <i class="ion ion-ionic"></i> Use Ionicons-icons for node</h2> <div id="mynetworkIO"></div> </body> </html>