Chapter 17. Implementation

When the icons attribute is enabled, callouts list are rendered with the numbered bullet icons like AsciiDoc. But it will not using images in standard images\icons directory.

AsciiDoc-Bootstrap backend 3.2.0 by introducing this standard AsciiDoc feature will use the badge css rule look like to draw bullet icons (circles).

[Note]

Credit to AsciiDoctor GH-114 issue for cool idea.

Here is an example that don’t use images but Bootstrap badges :

 .MS-DOS directory listing
 -----------------------------------------------------
 10/17/97   9:04         <DIR>    bin
 10/16/97  14:11         <DIR>    DOS            <1>
 10/16/97  14:40         <DIR>    Program Files
 10/16/97  14:46         <DIR>    TEMP
 10/17/97   9:04         <DIR>    tmp
 10/16/97  14:37         <DIR>    WINNT
 10/16/97  14:25             119  AUTOEXEC.BAT   <2>
  2/13/94   6:21          54,619  COMMAND.COM    <2>
 10/16/97  14:25             115  CONFIG.SYS     <2>
 11/16/97  17:17      61,865,984  pagefile.sys
  2/13/94   6:21           9,349  WINA20.386     <3>
 -----------------------------------------------------

 <1> This directory holds MS-DOS.
 <2> System startup code for DOS.
 <3> Some sort of Windows 3.1 hack.

which renders:

MS-DOS directory listing. 

10/17/97   9:04         <DIR>    bin
10/16/97  14:11         <DIR>    DOS            1
10/16/97  14:40         <DIR>    Program Files
10/16/97  14:46         <DIR>    TEMP
10/17/97   9:04         <DIR>    tmp
10/16/97  14:37         <DIR>    WINNT
10/16/97  14:25             119  AUTOEXEC.BAT   2
 2/13/94   6:21          54,619  COMMAND.COM    3
10/16/97  14:25             115  CONFIG.SYS     4
11/16/97  17:17      61,865,984  pagefile.sys
 2/13/94   6:21           9,349  WINA20.386     5

1

This directory holds MS-DOS.

2 3 4

System startup code for DOS.

5

Some sort of Windows 3.1 hack.

[Tip]

If you want to customize this bullet icons look like, please add a .callout CSS rule in a custom stylesheet, and apply it with -a stylesheet=<your_stylesheet>.

[Important]

Your custom stylesheet MUST be located in the {stylesdir}.