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.

          <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/solid.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",
      "\uF12a"
    ];

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

    // Specify the style.
    ogma.styles.addNodeRule({
      // Specify the icon font, color and contents.
      icon: {
        font: 'Font Awesome 5 Free',
        color: '#161344',
        style: 'bold',
        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>