Icons

Monogatari ships with Font Awesome (v7), so thousands of icons are available without installing anything. They’re already used throughout the default interface — the quick-menu buttons, the help screen, and more.

Using an icon#

Add a <span> (or <i>) with the icon’s classes. Each icon has a style prefix and a name:

<span class="fas fa-floppy-disk"></span>   <!-- solid -->
<span class="far fa-floppy-disk"></span>   <!-- regular (outline) -->
<span class="fab fa-github"></span>        <!-- brands / logos -->

Browse and search every icon — with the exact class to copy — on the Font Awesome icon gallery.

In menu buttons#

Anywhere you give a Monogatari button an icon (a quick menu or main menu button), you pass the same classes:

monogatari.component ('quick-menu').addButton ({
    string: 'Stats',
    icon: 'fas fa-chart-simple',
    data: { action: 'show-stats' }
});

In dialog and custom HTML#

Because your game is a web page, you can drop an icon into any HTML you write — a message, a custom component, or styled dialog:

<p>Press <span class="fas fa-arrow-right"></span> to continue.</p>