not showing

jnorthr

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