<!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"> <style> #mynetworkFA, #mynetworkIO { height: 300px; } </style> <script language="JavaScript"> function draw() { /* * Example for FontAwesome */ var optionsFA = { groups: { usergroups: { shape: 'icon', icon: { face: 'FontAwesome', code: '\uf0c0', size: 50, color: '#57169a' } }, users: { shape: 'icon', icon: { face: 'FontAwesome', code: '\uf007', size: 50, color: '#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', icon: { face: 'FontAwesome', code: '\uf1ad', size: 50, color: '#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 = { groups: { usergroups: { shape: 'icon', icon: { face: 'Ionicons', code: '\uf47c', size: 50, color: '#57169a' } }, users: { shape: 'icon', icon: { face: 'Ionicons', code: '\uf47e', size: 50, color: '#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', icon: { face: 'Ionicons', code: '\uf276', size: 50, color: '#f0a30a' } }]; // create a network var containerIO = document.getElementById('mynetworkIO'); var dataIO = { nodes: nodesIO, edges: edges }; var networkIO = new vis.Network(containerIO, dataIO, optionsIO); } </script> <script src="../googleAnalytics.js"></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>