All versions of this documentation
X

Icon

Icons are defined as font glyphs. Ogma works well with FontAwesome, but any font such as Arial may be used.
A node's icon is controlled by the icon.content attribute. The font is defined by the icon.font attribute, the color by the icon.color and size relative to the node size in the icon.scale. Icons can also be used in badges as illustrated in the badge example.

Open in a new window.
          <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <script src="../build/ogma.min.js"></script>
  <style>
    #graph-container { top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 0; overflow: hidden; }
  </style>
</head>
<body>
  <div id="graph-container"></div>

  <!-- we force the loading of the font awesome -->
  <i class="fa fa-camera-retro fa-1x" style="color: rgba(0,0,0,0);"></i>

<script>
'use strict';

var ICONS = [
  "A",
  "3",
  "\uF095",
  "\uF19c",
  "\uF183",
  "\uF0b1",
  "\uF1ba",
  "\uF11c",
  "\uF15a"
];

var ogma = new Ogma({
  container: 'graph-container'
});

// Specify the style.
ogma.styles.addNodeRule({
  // Specify the icon font, color and contents.
  icon: {
    font: 'FontAwesome',
    color: '#161344',
    content: function (n) { return ICONS[n.getId() % ICONS.length]; }
  },
  // Set the node color as white
  color: 'white',
  // Add a border to the node
  innerStroke: {
    color: '#161344',
    width: 3,
    minVisibleSize: 5
  }
});

ogma.generate.random({nodes: ICONS.length, edges:0}).then(function (graph) {
  ogma.setGraph(graph);
  ogma.view.locateGraph();
});
</script>
</body>
</html>