Chapter 20. Icons

AsciiDoc-Bootstrap backend 3.1.0 introduces a new inline macro for inserting an icon at an arbitrary place in paragraph content.

[Note]

Credit to AsciiDoctor GH-529 issue.

[Important]

AsciiDoc-Bootstrap backend 4.0 has dropped this icon inline macro, to keep a better compatibility with other backends. Use then the image inline macro with additional attributes.

Right now we are blessed with many icon fonts that continue to grow with every release, like Glyphicons, Font-Awesome, Ionicons, and more again …

AsciiDoc-Bootstrap backend 4.0 support these three icon fonts. Valid iconsfont attribute values are : glyphicon, font-awesome, and ionicons.

[Caution]

Our inline image macro is similar to the standard Asciidoc inline image macro with one exception:

  • If the iconsfont attribute is set, the macro will translate image to a font-based icon result.
image:<target>[<attributes>]

The contents of the image <target> is displayed.

Our Image macro attributes

Standard Image macro attributes

Here is an example that inserts a calendar icon in front of a blog entry and its published date.

image:icons/font-awesome/calendar.png[alt="calendar",icon="calendar",size="4x",iconsfont="font-awesome"] by Laurent Laville, published on November 21, 2013

Renders:

calendar by Laurent Laville, published on November 21, 2013

[Warning]

AsciiDoc-Bootstrap 4.0 did not used anymore the open block to simulate multi-columns. We used now the standard Bootstrap classes col-md-* and so on.

Here is another example that display two columns on medium device (greater than 992 pixels)

AsciiDoc Code. 

[role="col-md-3"]
====
[panel]
--
*About*
http://glyphsearch.com/[GlyphSearch]

image:icons/font-awesome/mobile.png[alt="mobile",icon="mobile",size="lg",iconsfont="font-awesome"]
image:icons/font-awesome/tablet.png[alt="tablet",icon="tablet",size="2x",iconsfont="font-awesome"]
image:icons/font-awesome/laptop.png[alt="laptop",icon="laptop",size="3x",iconsfont="font-awesome"]
image:icons/font-awesome/desktop.png[alt="desktop",icon="desktop",size="3x",iconsfont="font-awesome"]
--
====

[role="col-md-9"]
====
*GlyphSearch: Improving the Search for Icon Fonts*

GlyphSearch is a site that allows you to search
Font Awesome, Glyphicons, and Ionicons simultaneously.
====

unfloat::[]

About GlyphSearch

mobile tablet laptop desktop

GlyphSearch: Improving the Search for Icon Fonts

GlyphSearch is a site that allows you to search Font Awesome, Glyphicons, and Ionicons simultaneously.

And another example with three columns on medium device (greater than 992 pixels)

AsciiDoc Code. 

[role="col-md-2"]
====
[yellow]#image:icons/font-awesome/font.png[alt="font",icon="font",size="9x",iconsfont="font-awesome"]#
====

[role="col-md-8"]
[quote,http://fontello.com/]
____
*Fontello*

This http://fontello.com/[tool] lets you combine icon webfonts for your own project. With fontello you can:

* shrink glyph collections, minimizing font size
* merge symbols from several fonts into a single file
* access large sets of professional-grade open source icons
____

[role="col-md-2"]
.About
****
http://fontello.com/[Fontello], the icon font scissors.
****

unfloat::[]

font

 

Fontello

This tool lets you combine icon webfonts for your own project. With fontello you can:

  • shrink glyph collections, minimizing font size
  • merge symbols from several fonts into a single file
  • access large sets of professional-grade open source icons
 
 -- http://fontello.com/
[Warning]

All icon fonts do not support same icon names. Be carefull if you switch to another icons font.