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 <email@example.com> 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.
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
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 ! 🙂