Icons Font

When you want to use the same AsciiDoc source document with another backend than Bootstrap, previous version 3 with icon inline macro was a bad strategy. Version 4 uses now the standard image inline macro with additional attributes.

E.g, this snippet code:

image:./images/icons/glyphicon/glyphicons_045_calendar.png[alt="Calendar",icon="calendar",iconsfont="glyphicon"] 10:44 05/06/2014

Renders:

10:44 05/06/2014

We use here the iconsfont attribute, because we have already set it to another value in the header block.

E.g, this snippet code:

image:./images/icons/font-awesome/calendar.png[alt="Calendar",icon="calendar",iconsfont="font-awesome"] 10:44 05/06/2014

Renders:

10:44 05/06/2014

We use here the iconsfont attribute, because we have already set it to another value in the header block.

E.g, this snippet code:

image:./images/icons/ionicons/calendar.png[alt="Calendar",icon="calendar",iconsfont="ionicons",width=32,height=32] 10:44 05/06/2014

Renders:

10:44 05/06/2014

We use here the iconsfont attribute, because we have already set it to another value in the header block.

Do not forget attributes width and height with ionicons PNG images because they are defined in 512x512 pixels.

Behind the scene

Be sure to have both glyphicon, font-awesome and ionicons font support in your asciidoc-bootstrap.css file.

Have a look in the LESS source file less/asciidoc-bootstrap.less, you should have at least these lines activated :

@import "font-awesome/font-awesome.less";
@import "ionicons/ionicons.less";
@import "asciidoc/iconsfont.less";

Build this {docfile}
[https://raw.githubusercontent.com/llaville/asciidoc-bootstrap-backend/v4/docs/iconsfont.asciidoc]
with :

html5 backend

$ asciidoc.py
  -b html5
  -a linkcss
  -a stylesdir=./stylesheets
  -a scriptsdir=./javascripts
  {docfile}

bootstrap backend

$ asciidoc.py
  -b bootstrap
  -a linkcss
  -a stylesdir=./stylesheets
  -a scriptsdir=./javascripts
  -a theme=readable
  -a navbar=fixed
  -a totop
  {docfile}

See
[http://asciidoc.org/userguide.html#X60]
for docfile attribute.

Download PNG alternate images

With Glyphicon, extract contents of archive http://glyphicons.com/files/glyphicons_free.zip (glyphicons/png directory) to your {iconsdir}/glyphicon folder.
With Font-Awesome, use the Python script Font Awesome to PNG as follow:
```
$ font-awesome-to-png.py --font FONT --size 32 ALL
```
Where FONT is your local fonts/fontawesome-webfont.ttf, and copy results (all png files) to your {iconsdir}/font-awesome folder.
With Ionicons, extract contents of png/512 directory of your https://github.com/driftyco/ionicons/releases to your {iconsdir}/ionicons folder.

See
[http://asciidoc.org/userguide.html#X88]
for iconsdir attribute.

GlyphIcon usage

Font-Awesome usage

Ionicons usage

Learn More