Asciidoctor Admonition Icons Missing

Been writing some reference documents in my new ‘best friend’ – the asciidoctor markup syntax. For some time now i get puzzled when i want an admonition icon to appear in my document but it won’t. Ok my markup looks good to me and i have installed the ruby asciidoctor version:

jnorthr@jnorthr-EC548AA-ABU-a1128-uk:~/Desktop$ asciidoctor -V
Asciidoctor 0.1.4 [http://asciidoctor.org]

So a typical document like this works fine except that the beautiful image icons do not show up. I thought at first i had to lug around a folder of ./images/icon/*.png and all that stuff but it irked me somewhat.

My text of

= Notes About Asciidoc Sample Applications
jnorthr <jim.northrop@orange.fr>
v1.0, 2014-06-01 updated 7 June 2014

:icons: font

NOTE: Asciidoctor now supports font-based admonition icons, powered by Font Awesome!

== Overview

Caelyf lacks a template servlet for markup documents written using the asciidoctor markup syntax.

== Sample Application

You can find most of our sample applications on our github anynines account at https://github.com/anynines/[https://github.com/anynines/]. 

WARNING: You will need to signup with a cloud foundry PaaS provider before running any of these samples.

looks ok and renders as html quite nicely.


sample1


 

So that’s not what i need is it ? Where are my awesome icons ? Well, it turns out that i needed to add a bit of code to pull down the awesome.css stylesheet that has all the magic. So on the line just above


:icons: font

I added a passthru comment that renders in the final html document. That passthru comment looks like:

 

v1.0, 2014-06-01 updated 7 June 2014

++++
<link rel="stylesheet"  href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.1.0/css/font-awesome.min.css">
++++

:icons: font

So we need an external css link specification between the document date line and the icons font line. See my <LINK code above, and yes you do need to include ++++ lines above and below it too.

If you put that line into your .adoc script, so should experience the joy and pleasure of visible awesome fonts for all asciidoctor admonitions !   🙂

sample3

 


2 thoughts on “Asciidoctor Admonition Icons Missing

  1. Jim,

    Actually, it’s even simpler than that! Asciidoctor comes integrated with Font Awesome out of the box. You just need to remove the blank line between the document title & the font attribute entry.

    The font attribute entry must be part of the document header, which is offset from the body by a blank line.

    Give it a try!

    -Dan Allen

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s