AsciiDoc-Bootstrap backend 3.1.0 introduces a new inline macro for inserting an icon at an arbitrary place in paragraph content.
![]() | |
Credit to AsciiDoctor GH-529 issue. |
![]() | |
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.
![]() | |
Our inline image macro is similar to the standard Asciidoc inline image macro with one exception:
|
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:
by Laurent Laville, published on November 21, 2013
![]() | |
AsciiDoc-Bootstrap 4.0 did not used anymore the open block to simulate multi-columns.
We used now the standard Bootstrap classes |
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
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::[]
Fontello This tool lets you combine icon webfonts for your own project. With fontello you can:
| ||
-- http://fontello.com/ |
![]() | |
All icon fonts do not support same icon names. Be carefull if you switch to another icons font. |