Font Icons

Overview

Font icons are highly customizable vector-based symbols and icons embedded in font files, where specific character codes are mapped to icons instead of traditional letters or numbers. You can use them to provide helpful visual cues to your timeline.

Using Font Icons

Font icons can be used to style different types of KronoGraph items. Use them with:

• Entities, using their associated glyph, as shown in the Font Icons story
• Events, also shown in the Font Icons story. Note that KronoGraph automatically calculates whether there's enough space for them, and only displays them when:
  • There's enough room for them between individual events, as you zoom in.
  • The standardRowHeight is set to 20 or more.
• Glyphs, as illustrated in the Styling Glyphs story
• Markers, as demonstrated in the Markers story.

You can set the font family for each icon using fontFamily. Use escaped character code values in the text property to set the specific font icon:

const entities = {
  'Person 1': {
    fontIcon: {
      fontFamily: 'Font Awesome 6 Free',
      fontWeight: 900, // use the 'solid' font icon
      text: '\u{f1b9}', // car icon
    },
  },
};

const events = {
  'email 1': {
    entityIds: ['Person 1'],
    time: new Date(2025, 7, 14, 9, 27),
    fontIcon: {
      fontFamily: 'Font Awesome 6 Free',
      fontWeight: 900,
      text: '\u{f2b6}', // open envelope icon
    },
  },
};

Loading Font Icons

Fonts must be loaded into the page before they can be used in KronoGraph.

Modern browsers support the native fonts.load() function, so we've used this throughout our examples, but you can also use dedicated font-loading libraries such as Web Font Loader.

Note that when using fonts.load() you must ensure that the fonts have finished loading before creating your timeline, adding your Timeline component, or KronoGraph will be unable to render them. This is illustrated in the snippet below and the Font Icons story.

const fontAwesomeSolid = '900 16px "Font Awesome 6 Free"';
document.fonts.load(fontAwesomeSolid);

document.fonts.ready.then(() => {
  const timeline = createTimeline('my-timeline');
  timeline.set({ entities, events });
});

const loadFonts = () => {
  const fontAwesomeSolid = '900 16px "Font Awesome 6 Free"';
  document.fonts.load(fontAwesomeSolid);
};

export const MyComponent = () => {
  const [fontsReady, setFontsReady] = React.useState(false);

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

  if (!fontsReady) {
    return null;
  }

  return (
    <Timeline
      entities={entities}
      events={events}
    />
  );
};