Search

Font Icons

Timeline

Decorate entities and events with font icons.

Font Icons
View live example →

Entities and events can have font icons.

Most font icons use single or multibyte unicode encoding. Pass the escaped character code e.g. '\u{F012C}' to the text property.

This Story uses three different font icon libraries:

  • Font Awesome
  • Material Design Icons
  • IcoFont

See also:

import { createTimeline } from "kronograph";
import data from "./data";

const fontAwesomeSolid = '900 16px "Font Awesome 5 Free"';
const fontAwesomeRegular = '400 16px "Font Awesome 5 Free"';
const icoFont = '400 16px "IcoFont"';
const materialFont = '400 16px "Material Design Icons"';

document.fonts.load(fontAwesomeSolid);
document.fonts.load(fontAwesomeRegular);
document.fonts.load(icoFont);
document.fonts.load(materialFont);

document.fonts.ready.then(() => {
  // Ensures the font icons (declared in the HTML <head>)
  // are ready before KronoGraph uses them.
  const timeline = createTimeline("my-timeline");
  timeline.options({ entities: { glyphPosition: "right" } });
  timeline.set(data);
  timeline.fit();
});
export default {
  entityTypes: {
    default: {
      glyph: {
        fontIcon: {
          fontFamily: "Font Awesome 5 Free",
          fontWeight: 900,
          text: "\u{f13d}", // anchor
        },
      },
    },
  },
  eventTypes: {
    opened: {
      fontIcon: {
        color: "#014d40",
        dy: -5,
        fontFamily: "Font Awesome 5 Free",
        scale: 1.2,
        text: "\u{f2b6}", // open envelope
      },
    },
  },
  entities: {
    "smith-johnathan-151": {
      label: "John Smith",
      glyph: {
        fontIcon: {
          color: "#014d40",
          fontFamily: "Font Awesome 5 Free",
          fontWeight: 900,
          scale: 1.2,
          text: "\u{f1b9}", // car
        },
      },
    },
    "west-josephine-126": {
      label: "Josephine West",
    },
    "roberts-nathaniel-023": {
      label: "Nathan Roberts",
      glyph: {
        fontIcon: {
          dy: 7.5,
          fontFamily: "IcoFont",
          scale: 1.6,
          text: "\u{e842}", // stag
        },
      },
    },
    "baxter-eleanor-004": {
      label: "Ella Baxter",
      glyph: {
        fontIcon: {
          fontFamily: "Material Design Icons",
          scale: 1.5,
          text: "\u{F012C}", // check
        },
      },
    },
  },
  events: {
    "email 1": {
      entityIds: ["smith-johnathan-151", "roberts-nathaniel-023", "baxter-eleanor-004"],
      time: {
        start: new Date(2025, 7, 14, 8, 49),
        end: new Date(2025, 7, 14, 8, 49, 10),
      },
      fontIcon: {
        dy: 5,
        fontFamily: "IcoFont",
        scale: 1.6,
        text: "\u{e829}", // bat
      },
    },
    "email 2": {
      entityIds: ["smith-johnathan-151", "baxter-eleanor-004"],
      time: new Date(2025, 7, 14, 8, 56),
      type: "opened",
    },
    "email 3": {
      entityIds: ["smith-johnathan-151", "west-josephine-126"],
      time: new Date(2025, 7, 14, 9, 2),
      fontIcon: {
        fontFamily: "Material Design Icons",
        scale: 1.5,
        text: "\u{F012C}", // check
      },
    },
    "email 4": {
      entityIds: ["smith-johnathan-151", "west-josephine-126"],
      time: new Date(2025, 7, 14, 9, 2),
      type: "opened",
    },
    "email 5": {
      entityIds: ["smith-johnathan-151", "west-josephine-126"],
      time: new Date(2025, 7, 14, 9, 27),
      fontIcon: {
        fontFamily: "IcoFont",
        scale: 1.75,
        text: "\u{e87a}", // penguin
      },
    },
  },
};
<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/public/fonts/fontawesome-free/css/all.css" />
    <link rel="stylesheet" type="text/css" href="/public/fonts/icofont/icofont.css" />
    <link
      rel="stylesheet"
      type="text/css"
      href="/public/fonts/MaterialDesignIcons/css/materialdesignicons.css"
    />
    <link rel="stylesheet" href="@ci/theme/kg/css/examples.css" />
  </head>
  <body>
    <div class="story">
      <div class="story__timeline" id="my-timeline"></div>
    </div>
    <script type="module" src="./code.js"></script>
  </body>
</html>
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import Timeline from "kronograph/react/Timeline";
import data from "./data";

const { entityTypes, eventTypes, entities, events } = data;
const timelineOptions = { entities: { glyphPosition: "right" } };

const loadFonts = () => {
  // These fonts are declared in the <head> element of the HTML page.
  const fontAwesomeSolid = '900 16px "Font Awesome 5 Free"';
  const fontAwesomeRegular = '400 16px "Font Awesome 5 Free"';
  const icoFont = '400 16px "IcoFont"';
  const materialFont = '400 16px "Material Design Icons"';

  document.fonts.load(fontAwesomeSolid);
  document.fonts.load(fontAwesomeRegular);
  document.fonts.load(icoFont);
  document.fonts.load(materialFont);
};

export const Demo = () => {
  const [fontsReady, setFontsReady] = useState(false);

  loadFonts();
  document.fonts.ready.then(() => {
    setFontsReady(true);
  });

  if (!fontsReady) {
    return null;
  }

  return (
    <Timeline
      entityTypes={entityTypes}
      eventTypes={eventTypes}
      entities={entities}
      events={events}
      options={timelineOptions}
    />
  );
};

const root = createRoot(document.getElementById("my-timeline"));
root.render(<Demo />);
export default {
  entityTypes: {
    default: {
      glyph: {
        fontIcon: {
          fontFamily: "Font Awesome 5 Free",
          fontWeight: 900,
          text: "\u{f13d}", // anchor
        },
      },
    },
  },
  eventTypes: {
    opened: {
      fontIcon: {
        color: "#014d40",
        dy: -5,
        fontFamily: "Font Awesome 5 Free",
        scale: 1.2,
        text: "\u{f2b6}", // open envelope
      },
    },
  },
  entities: {
    "smith-johnathan-151": {
      label: "John Smith",
      glyph: {
        fontIcon: {
          color: "#014d40",
          fontFamily: "Font Awesome 5 Free",
          fontWeight: 900,
          scale: 1.2,
          text: "\u{f1b9}", // car
        },
      },
    },
    "west-josephine-126": {
      label: "Josephine West",
    },
    "roberts-nathaniel-023": {
      label: "Nathan Roberts",
      glyph: {
        fontIcon: {
          dy: 7.5,
          fontFamily: "IcoFont",
          scale: 1.6,
          text: "\u{e842}", // stag
        },
      },
    },
    "baxter-eleanor-004": {
      label: "Ella Baxter",
      glyph: {
        fontIcon: {
          fontFamily: "Material Design Icons",
          scale: 1.5,
          text: "\u{F012C}", // check
        },
      },
    },
  },
  events: {
    "email 1": {
      entityIds: ["smith-johnathan-151", "roberts-nathaniel-023", "baxter-eleanor-004"],
      time: {
        start: new Date(2025, 7, 14, 8, 49),
        end: new Date(2025, 7, 14, 8, 49, 10),
      },
      fontIcon: {
        dy: 5,
        fontFamily: "IcoFont",
        scale: 1.6,
        text: "\u{e829}", // bat
      },
    },
    "email 2": {
      entityIds: ["smith-johnathan-151", "baxter-eleanor-004"],
      time: new Date(2025, 7, 14, 8, 56),
      type: "opened",
    },
    "email 3": {
      entityIds: ["smith-johnathan-151", "west-josephine-126"],
      time: new Date(2025, 7, 14, 9, 2),
      fontIcon: {
        fontFamily: "Material Design Icons",
        scale: 1.5,
        text: "\u{F012C}", // check
      },
    },
    "email 4": {
      entityIds: ["smith-johnathan-151", "west-josephine-126"],
      time: new Date(2025, 7, 14, 9, 2),
      type: "opened",
    },
    "email 5": {
      entityIds: ["smith-johnathan-151", "west-josephine-126"],
      time: new Date(2025, 7, 14, 9, 27),
      fontIcon: {
        fontFamily: "IcoFont",
        scale: 1.75,
        text: "\u{e87a}", // penguin
      },
    },
  },
};
<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="@ci/theme/kg/css/examples.css" />
  </head>
  <body>
    <div id="my-timeline" style="height: 100vh"></div>
    <script type="module" src="./code.jsx"></script>
  </body>
</html>

Terms of use

These terms do not alter or supersede any existing agreements between you (or your employer) and us.

By accessing or using any Content you agree to be bound by these Terms of Use. Please review these terms carefully before using the website.

The contents of this website, including but not limited to any text, code samples, API references, schemas, interactive tools, and other materials (collectively, the 'Content'), are made available for informational and internal evaluation purposes only. All intellectual property rights in the Content are reserved. No licence is granted to use the Content for any commercial purpose, or to copy, distribute, modify, reverse-engineer, or incorporate any part of the Content into any product or service, without our prior written consent.

This Content is provided “as is” and “as available,” without any representations, warranties, or guarantees of any kind, whether express or implied, including but not limited to implied warranties of merchantability, fitness for a particular purpose, non-infringement, or accuracy. To the fullest extent permitted by applicable law, we expressly exclude and disclaim all implied warranties, conditions, and other terms that might otherwise be implied.

We disclaim all liability for any loss or damage, whether direct, indirect, incidental, consequential, or otherwise, arising from any reliance placed on the Content or from your use of it, to the fullest extent permitted by applicable law. By continuing to access or use the Content, you acknowledge and agree to these terms.