From 158309edbf0c420ddbf411ffd356f13933f4cb84 Mon Sep 17 00:00:00 2001
From: Rene Heindl <Rene.Heindl@goeg.at>
Date: Mon, 16 Feb 2015 13:47:47 +0100
Subject: [PATCH] Added Examples for Icons

---
 examples/network/38_node_as_icon.html | 113 ++++++++++++++++++++++++++
 examples/network/index.html           |   1 +
 2 files changed, 114 insertions(+)
 create mode 100644 examples/network/38_node_as_icon.html
diff --git a/examples/network/38_node_as_icon.html b/examples/network/38_node_as_icon.html
new file mode 100644
index 00000000..5cbbb2aa
--- /dev/null
+++ b/examples/network/38_node_as_icon.html
@@ -0,0 +1,113 @@
+<!doctype html>
+<html lang="en">
+<header>
+<meta charset="UTF-8">
+<title>Network | node as icon</title>
+
+  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
+  <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">
+</header>
+
+<body>
+<h2><i class="fa fa-flag"></i> Use FontAwesome-icons for node</h1>
+	<div id="mynetworkFA"></div>
+  <h2><i class="ion ion-ionic"></i> Use Ionicons-icons for node</h1>
+  <div id="mynetworkIO"></div>
+
+<script type="text/javascript">
+  $(function(){
+	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);
+  
+
+  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>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/network/index.html b/examples/network/index.html
index 13de6942..a44be6d0 100644
--- a/examples/network/index.html
+++ b/examples/network/index.html
@@ -49,6 +49,7 @@
   <p><a href="35_label_stroke.html">35_label_stroke.html</a></p>
   <p><a href="36_HTML_in_Nodes.html">36_HTML_in_Nodes.html</a></p>
   <p><a href="37_label_alignment.html">37_label_alignment.html</a></p>
+  <p><a href="38_node_as_icon.html">38_node_as_icon.html</a></p>
   <p><a href="graphviz/graphviz_gallery.html">graphviz_gallery.html</a></p>
 
 </div>
