Awesome Antora: Add icons to admonition labels

Admonitions are a great way to draw the reader’s attention to auxiliary information.
Asciidoctor provides five admonition style labels:

NOTE

TIP

IMPORTANT

CAUTION

WARNING

If you are familiar with Asciidoctor, you probably know that you can enable font-based icons using :icons: font.
When you do that, Asciidoctor will draw an icon for the built-in admonition labels.
And here’s the result with the default stylesheet:

It might come as a surprise, but the Antora’s default UI uses its own stylesheet and does not include an icon font.
So, using :icons: font will not produce the desired affect:

Luckily, with a few lines of CSS, we can add the icons back to the admonitions labels.

Supplemental files

Antora provides a feature called "supplemental files" to supercharge the UI.
As you can see below, we can define a key named supplemental_files that points to a directory named supplemental-ui: