j1-template 2021.0.2 → 2021.0.7

data/lib/starter_web/pages/public/learn/roundtrip/300_icon_fonts.adoc

@@ -1,7 +1,7 @@
 ---
 title:                                  Roundtrip
 tagline:                                icon fonts
-date:                                   2020-11-06 12:00:00
+date:                                   2020-11-06 00:00:00
 description: >
                                         J1 Template support popular icons font sets out-of-the-box.
                                         The icon sets MDI and FA are very good in design and have a rich set of
@@ -36,7 +36,7 @@ resource_options:
 // Enable the Liquid Preprocessor
 :page-liquid:
 
-// Set page (local) attributes here
+// Set (local) page attributes here
 // -----------------------------------------------------------------------------
 // :page--attr:                         <attr-value>
 :images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
@@ -73,9 +73,10 @@ Framework*. See section <<Iconify Icons>> for more information.
 == Material Design Icons
 
 The primary icon-set for J1 Template is link:{mdi-home}[Material Design Icons, {browser-window--new}],
-because it is extremely rich set providing more than 3300+ icons (v3.3.92). From a design
-perspective, _MDI_ has an excellent Material Design support an comes with the
-original icon set created by _Google_ build-in.
+because it is extremely rich set providing more than 5900+ icons for the
+current version (v5.9.55). From a design perspective, _MDI_ has an excellen
+*Material Design* support an comes with the original icon set created by
+_Google_ build-in.
 
 _Material Design Icons_ (MDI) is a beneficial design resource for Web Design
 that is based on _Google_'s Material Design. _MDI_ is a community-driven
@@ -89,7 +90,9 @@ and MD style specification.
 
 |1x
 |no modifier set
-|All `icon_name` can be found on the Preview page for MDI Icon Previewer +
+|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+
+No modifiers +
 [source, adoc, role="noclip"]
 ----
 mdi:account[1x]
@@ -98,7 +101,9 @@ mdi:account[1x]
 
 |3x
 |no modifier set
-|All `icon_name` can be found on the Preview page for MDI Icon Previewer +
+|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+
+No modifiers +
 [source, adoc, role="noclip"]
 ----
 mdi:account[3x]
@@ -107,7 +112,9 @@ mdi:account[3x]
 
 |5x
 |no modifier set
-|All `icon_name` can be found on the Preview page for MDI Icon Previewer
+|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+
+No modifiers +
 [source, adoc, role="noclip"]
 ----
 mdi:account[5x]
@@ -116,7 +123,9 @@ mdi:account[5x]
 
 |5x
 |`mdi-rotate-45`
-|Rotate 45 degrees
+|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+
+Rotate 45 degrees +
 [source, adoc, role="noclip"]
 ----
 mdi:account[5x mdi-rotate-45]
@@ -125,7 +134,9 @@ mdi:account[5x mdi-rotate-45]
 
 |5x
 |`mdi-rotate-315`
-|Rotate 315 degrees
+|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+
+Rotate 315 degrees +
 [source, adoc, role="noclip"]
 ----
 mdi:account[5x mdi-rotate-315]
@@ -135,7 +146,9 @@ mdi:account[5x mdi-rotate-315]
 |5x
 |`mdi-light` +
 `mdi-flip-v`
-|Colour set to MDI Light (Grey) and flipped vertical
+|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+
+Colour set to (md) light-grey and flipped vertical +
 [source, adoc, role="noclip"]
 ----
 mdi:alert[5x mdi-light mdi-flip-v]
@@ -144,7 +157,9 @@ mdi:alert[5x mdi-light mdi-flip-v]
 
 |5x
 |`md-indigo`
-|Colour set to MDI Indigo
+|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+
+Colour set to (md) indigo +
 [source, adoc, role="noclip"]
 ----
 mdi:alert[5x md-indigo]
@@ -153,7 +168,9 @@ mdi:alert[5x md-indigo]
 
 |5x
 |`md-pink`
-|Colour set to MDI Pink
+|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+
+Colour set to (md) pink +
 [source, adoc, role="noclip"]
 ----
 mdi:alert[5x md-pink]
@@ -162,7 +179,9 @@ mdi:alert[5x md-pink]
 
 |5x
 |`mdi-spin`
-|Added animation of type Rotate (Spin)
+|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+
+Added animation of type rotate (spin) +
 [source, adoc, role="noclip"]
 ----
 mdi:loading[5x mdi-spin]
@@ -172,7 +191,9 @@ mdi:loading[5x mdi-spin]
 |5x
 |`md-red-900` +
 `mdi-pulsed`
-|Colour  set to MDI Dark Red and added animation of type Pulsed
+|All icons can be found for preview at the link:{url-material-design-icons--cheatsheet}[MDI Cheatsheet, {browser-window--new}] page online. +
+
+Colour  set to (md) color dark-red and added animation of type pulsed +
 [source, adoc, role="noclip"]
 ----
 mdi:heart[5x md-red-900 mdi-pulsed]
@@ -193,37 +214,102 @@ the official set created by _Google_.
 _J1 Template_ supports the full set of _MDI_ for the Web (Webfont, WOFF). The
 icon set is fully integrated and can be used out-of-the-box.
 
-For MDI a Preview Page is available to explore what can be done base on the
+For MDI a preview is available to explore what can be done base on the
 J1 implementation regarding sizes, colours, animations etc. Go for the
-link:{previewer-mdi}[Preview Page, {browser-window--new}] and check-out what's
+link:{previewer-mdi}[preview, {browser-window--new}] and check-out what's
 possible using MDI font icons!
 
 == FontAwesome Icons
 
-FontAwesome is a font and icon toolkit based on CSS. It was initially created
-by Dave Gandy. The previous version 4 was mainly for the use with Twitter
-Bootstrap V3. The new version V5, released in December 2017, is focussing all
-frameworks used for web development. Today, FA comes with 2300+ icons included.
+_FontAwesome_ is a font and icon toolkit based on CSS. It was initially created
+by _Dave Gandy_. The previous *version 4* was mainly for the use with Twitter
+Bootstrap *V3*. The new version *V5*, released in December 2017, is focussing
+all frameworks used for web development. Today, the *free FA* icon set comes
+with 1400+ icons included.
 
-
-[NOTE]
-====
-Since version 5, the icon set comes in two packages: FontAwesome Free
-and the proprietary FontAwesome Pro version available for a license fee.
+Since version 5, the icon set comes in two packages: FontAwesome *Free*
+and the proprietary, commercial FontAwesome *Pro* version but requires a
+license fee to pay.
 
 The free versions (all releases up to 4 and the free version for 5) are
 available under SIL Open Font License 1.1, Creative Commons Attribution 4.0,
 and the MIT License.
-====
 
-.FontAwesome Icons
+FontAwesome V5 meets the Material Design idea (of _Google_) and in comparison
+to Version 4, the current version is much more than a face-lifting. Version 5
+comes with more than 2300+ icons, but many of them are available with the Pro
+license only. For the Free version, only a subset of 900+ icons is available.
+
+NOTE: The CSS styles for FontAwesome V5 has been extended for J1 Template to
+the same classes (and their respective names) as for other Font Icon sets.
+Already existing styles like `fa-flip-vertical` are available as `fa-flip-v`
+as well. See all types that can be used with the MDI
+link:{previewer-mdi}[preview, {browser-window--new}].
+
+You can checkout what icons available at link:{fontawesome-icons}[FontAwesome Icons,
+{browser-window--new}]. _FontAwesome_ V5 is fully integrated - no need for
+additional resources to load. But in comparison to Version 4, a lot of
+differences needs to be noticed.
+
+If you haven't used V5 yet, it is highly recommended to visit the
+link:{fontawesome-get-started}[Get started, {browser-window--new}] pages to learn
+the basics and features and styles.
+
+With version V5 of _FontAwesome_, the icon set is split in two general parts:
+
+* standard icons (symbols) indicated by *FAS*
+* brand icons (icons for companies and brands) indicated by *FAB*
+
+NOTE: Using FontAwesome with Asciidoc is quite easy as two inline macros
+`fab:` and `fas:` are available to place icons where ever you want. See more about
+this in section link:{roundtrip-asciidoc-extensions}#icon-fonts[Asciidoc Extensions]
+
+Find below examples of both and the use with J1 Template.
+
+=== Brand icons
+
+.FontAwesome Icons (FAB)
+[cols="2a,3a,4a,^", options="header", width="100%", role="rtable mt-3"]
+|===============================================================================
+|Size |Modifier |Markup |Render
+
+|2x
+|no modifier set
+|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+
+No modifiers +
+[source, adoc, role="noclip"]
+----
+fab:google[2x]
+----
+^|fab:google[2x]
+
+|5x
+|`md-blue`
+|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+
+Color blue +
+[source, adoc, role="noclip"]
+----
+fab:blogger[5x md-blue]
+----
+|fab:blogger[5x md-blue]
+
+|===============================================================================
+
+
+=== Standard icons
+
+.FontAwesome Icons (FAS)
 [cols="2a,3a,4a,^", options="header", width="100%", role="rtable mt-3"]
 |===============================================================================
 |Size |Modifier |Markup |Render
 
 |1x
 |no modifier set
-|All `icon_name` can be found on the Preview page for MDI Icon Previewer
+|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+
+No modifiers +
 [source, adoc, role="noclip"]
 ----
 fas:user[1x]
@@ -232,7 +318,9 @@ fas:user[1x]
 
 |3x
 |no modifier set
-|All `icon_name` can be found on the Preview page for MDI Icon Previewer
+|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+
+No modifiers +
 [source, adoc, role="noclip"]
 ----
 fas:user[3x]
@@ -241,7 +329,9 @@ fas:user[3x]
 
 |5x
 |no modifier set
-|All `icon_name` can be found on the Preview page for MDI Icon Previewer
+|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+
+No modifiers +
 [source, adoc, role="noclip"]
 ----
 fas:user[5x]
@@ -250,7 +340,9 @@ fas:user[5x]
 
 |5x
 |`fa-rotate-90`
-|Rotate 90 degrees
+|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+
+Rotate 90 degrees +
 [source, adoc, role="noclip"]
 ----
 fas:user[5x fa-rotate-90]
@@ -260,7 +352,9 @@ fas:user[5x fa-rotate-90]
 |5x
 |`mdi-light` +
 `fa-flip-v`
-|Colour set to MDI Light (Grey) and flipped vertical
+|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+
+Colour set to MDI Light (Grey) and flipped vertical +
 [source, adoc, role="noclip"]
 ----
 fas:exclamation-triangle[5x mdi-light fa-flip-v]
@@ -269,7 +363,9 @@ fas:exclamation-triangle[5x mdi-light fa-flip-v]
 
 |5x
 |`md-indigo`
-|Colour set to MDI Indigo
+|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+
+Colour set to MDI Indigo +
 [source, adoc, role="noclip"]
 ----
 fas:alert[5x md-indigo]
@@ -278,7 +374,9 @@ fas:alert[5x md-indigo]
 
 |5x
 |`md-pink`
-|Colour set to MDI Pink
+|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+
+Colour set to MDI Pink +
 [source, adoc, role="noclip"]
 ----
 fas:alert[5x md-pink]
@@ -287,7 +385,9 @@ fas:alert[5x md-pink]
 
 |5x
 |`fa-spin`
-|Added animation of type Rotate (Spin)
+|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+
+Added animation of type Rotate (Spin) +
 [source, adoc, role="noclip"]
 ----
 fas:circle-notch[5x fa-spin]
@@ -297,7 +397,9 @@ fas:circle-notch[5x fa-spin]
 |5x
 |`md-red-900` +
 `md-red-900` `fa-pulsed`
-|Colour set to MDI Dark Red and added animation of type Pulsed
+|All icons can be found for preview at the link:{fontawesome-icons}[FA Gallery, {browser-window--new}] page online. +
+
+Colour set to MDI Dark Red and added animation of type Pulsed +
 [source, adoc, role="noclip"]
 ----
 fas:heart[5x md-red-900 fa-pulsed]
@@ -306,46 +408,25 @@ fas:heart[5x md-red-900 fa-pulsed]
 
 |===============================================================================
 
-NOTE: Using FontAwesome with Asciidoc is quite easy as two inline macros
-`fas:` and `fas:` are available to place icons where ever you want. See more about
-this in section link:{roundtrip-asciidoc-extensions}#icon-fonts[Asciidoc Extensions]
-
-FontAwesome V5 meets the Material Design idea (of _Google_) and in comparison
-to Version 4, the current version is much more than a face-lifting. Version 5
-comes with more than 2300+ icons, but many of them are available with the Pro
-license only. For the Free version, only a subset of 900+ icons is available.
-
-NOTE: The CSS styles for FontAwesome V5 has been extended for J1 Template to
-the same classes (and their respective names) as for other Font Icon sets.
-Already existing styles like `fa-flip-vertical` are available as `fa-flip-v`
-as well. See all types that can be used with the MDI
-link:{previewer-mdi}[Preview Page, {browser-window--new}].
-
-You can checkout what icons available at link:{fontawesome-icons}[FontAwesome Icons,
-{browser-window--new}]. _FontAwesome_ V5 is fully integrated - no need for
-additional resources to load. But in comparison to Version 4, a lot of
-differences needs to be noticed.
-
-If you haven't used V5 yet, it is highly recommended to visit the
-link:{fontawesome-get-started}[Get started, {browser-window--new}] pages to learn
-the basics and features and styles.
-
 
 == Iconify Icons
 
-MDI and FA are rich icon-sets but designed for general use. Sometimes
-icons are missing in one of these fonts like specific brand or theme
-icons.
-
-An interesting solution for using font icons from a remote repository is
-link:{iconify-home}[Iconify, {browser-window--new}]. Iconify is a so-called unified
-OpenSource icon framework that makes it possible to use icons from different
-icon sets using one syntax.
+MDI and FA are rich icon sets but designed for general use. Sometimes icons
+are missing in one of these fonts like specific brand or theme icons. An
+interesting solution for using font icons from a remote repository is
+link:{iconify-home}[Iconify, {browser-window--new}]. Iconify is a so-called
+unified OpenSource icon framework that makes it possible to use icons from
+different icon sets using one (unified) syntax.
 
 To access that framework, a Javascript client is needed. For J1 Template, the
-client is available with the JS assets (/assets/themes/j1/extensions/iconify)
-and is loaded per default. To see what icon sets available with that framework,
-check the page link:{iconify-icon-sets}[Iconify Icon Sets, {browser-window--new}].
+client is build-in and is loaded if Iconify is requested as a resource. To see
+what icon sets available with that framework, check the page
+link:{iconify-icon-sets}[Iconify Icon Sets, {browser-window--new}].
+
+NOTE: Using Iconify icons with J1 Template is quite easy. An Asciidoctor
+inline macro `iconify:` (Asciidoctor Extension) is available to place icons
+where ever you want. See more about this in section
+link:{roundtrip-asciidoc-extensions}#icon-fonts[Asciidoc Extensions]
 
 Currently, over 40,000 vector icons are available for many different use cases.
 Find some examples below.
@@ -357,21 +438,25 @@ Find some examples below.
 
 |3x
 |no modifier set
-|All `icons` can be found on the preview page at link:{iconify-brand-icons}[SVG Logos, {browser-window--new}]
+|All icons can be found for preview at link:{iconify-brand-icons}[SVG Logos, {browser-window--new}] page online. +
+
+No modifiers +
 [source, adoc, role="noclip"]
 ----
 iconify:logos:opensource[3x]
 ----
 ^|iconify:logos:opensource[3x]
 
-|5x
+|3x
 |no modifier set
-|All `icons` can be found on the preview page at link:{iconify-brand-icons}[SVG Logos, {browser-window--new}]
+|All icons can be found for preview at link:{iconify-brand-icons}[SVG Logos, {browser-window--new}] page online. +
+
+No modifiers +
 [source, adoc, role="noclip"]
 ----
-iconify:logos:atom[5x]
+iconify:logos:asciidoctor[3x]
 ----
-^|iconify:logos:atom[5x]
+^|iconify:logos:asciidoctor[3x]
 
 |===============================================================================
 
@@ -382,7 +467,9 @@ iconify:logos:atom[5x]
 
 |3x
 |no modifier set
-|All `icons` can be found on the preview page at link:{iconify-medical-icons}[Medical Icons, {browser-window--new}]
+|All icons can be found for preview at link:{iconify-medical-icons}[Medical Icons, {browser-window--new}] page online. +
+
+No modifiers +
 [source, adoc, role="noclip"]
 ----
 iconify:medical-icon:i-ear-nose-throat[3x]
@@ -391,7 +478,9 @@ iconify:medical-icon:i-ear-nose-throat[3x]
 
 |5x
 |`md-red-900`
-|All `icons` can be found on the preview page at link:{iconify-medical-icons}[Medical Icons, {browser-window--new}]
+|All icons can be found for preview at link:{iconify-medical-icons}[Medical Icons, {browser-window--new}] page online. +
+
+Color (md) red +
 [source, adoc, role="noclip"]
 ----
 iconify:medical-icon:i-ear-nose-throat[5x md-red-900]
@@ -400,19 +489,13 @@ iconify:medical-icon:i-ear-nose-throat[5x md-red-900]
 
 |===============================================================================
 
-NOTE: Using Iconify icons with Asciidoc is quite easy as an inline macro
-`iconify:` is available to place icons where ever you want. See more about
-this in section link:{roundtrip-asciidoc-extensions}#icon-fonts[Asciidoc Extensions]
 
 == Whats next
 
 Have you've enjoyed the possibilities J1 offers for managing and
 manipulating Font Icons. Do you think these Icons sets can fit your needs?
-
 Using Iconify, for all topics an icon font should be found. And it's simple,
 isn't it?
 
-We hope so.
-
 To check more features of the template, go for the link:{roundtrip-asciidoc-extensions}[
 Asciidoc extensions] made for J1!