j1-template 2022.4.10 → 2022.5.0.rc0

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

@@ -0,0 +1,579 @@
+---
+title:                                  Roundtrip
+tagline:                                icon fonts
+date:                                   2020-11-06 00:00:00
+description: >
+                                        J1 Template supports 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
+                                        different icons for many categories used for the Web.
+                                        Iconify icons are not a locally stored icon-set like MDI or FA. All icons are
+                                        loaded over the Internet using the so-called Unified OpenSource Icon
+                                        Framework.
+
+categories:                             [ Roundtrip ]
+tags:                                   [ Introduction, Module, Icon, Fonts ]
+
+fab_menu_id:                            page_ctrl
+
+permalink:                              /pages/public/learn/roundtrip/mdi_icon_font/
+regenerate:                             false
+
+resources:                              [ animate, iconify ]
+resource_options:
+  - attic:
+      slides:
+#       - url:                          /assets/images/pages/roundtrip/icon-fonts-1920x1280-bw.jpg
+        - url:                          /assets/images/modules/attics/1920x1280/harpal-singh.jpg
+          alt:                          Photo by Harpal Singh on Unsplash
+          badge:
+            type:                       unsplash
+            author:                     Harpal Singh
+            href:                       https://unsplash.com/@aquatium
+---
+
+// Page Initializer
+// =============================================================================
+// Enable the Liquid Preprocessor
+:page-liquid:
+
+// Set (local) page attributes here
+// -----------------------------------------------------------------------------
+// :page--attr:                         <attr-value>
+:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images
+
+//  Load Liquid procedures
+// -----------------------------------------------------------------------------
+{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
+
+// Load page attributes
+// -----------------------------------------------------------------------------
+{% include {{load_attributes}} scope="all" %}
+
+
+// Page content
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+// Include sub-documents (if any)
+// -----------------------------------------------------------------------------
+[role="dropcap"]
+J1 Template supports 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 different icons for many
+categories used for the Web. Iconify icons are not a locally stored icon-set
+like MDI or FA. All icons are loaded over the Internet using the so-called
+Unified OpenSource Icon Framework.
+
+J1 Template supports popular icons font sets out-of-the-box:
+
+* link:{url-mdi--home}[Material Design Icons, {browser-window--new}] (MDI)
+* link:{url-fontawesome--home}[FontAwesome Icons V5, {browser-window--new}] (FA)
+* link:{url-iconify--home}[Iconify Icons, {browser-window--new}] (II)
+
+The icon sets MDI and FA are very good in design and have a rich set of
+different icons for many categories used for the Web. See below for some
+details for <<Material Design Icons>> and <<FontAwesome Icons>>.
+
+Iconify icons are not a locally stored icon-set like MDI or FA. All icons are
+loaded over the Internet using the so-called *Unified OpenSource Icon
+Framework*. See section <<Iconify Icons>> for more information.
+
+== Material Design Icons
+
+The primary icon-set for the J1 Template is
+link:{url-mdi--home}[Material Design Icons, {browser-window--new}],
+because it is a rich set providing more than 5900+ icons for the current
+version (v5.9.55). MDI has excellent *Material Design* support from a design
+perspective and comes with the original icon set created by _Google_ build-in.
+
+_Material Design Icons_ (MDI) is a beneficial design resource for Web Design
+based on _Google_'s Material Design. _MDI_ is a community-driven
+project to create an increased number of icons based on _Google_'s official
+repository and MD style specification.
+
+.Material Design Icons
+[cols="2a,3a,4a,^", options="header", width="100%", role="rtable mt-3"]
+|===
+|Size |Modifier |Markup |Render
+
+|1x
+|no modifier set
+|All icons can be found for preview at the
+link:{url-material-design-icons--cheatsheet}[MDI Icons, {browser-window--new}]
+page online. +
+
+No modifiers +
+[source, adoc, role="noclip"]
+----
+mdi:account[1x]
+----
+|mdi:account[1x]
+
+|3x
+|no modifier set
+|All icons can be found for preview at the
+link:{url-material-design-icons--cheatsheet}[MDI Icons, {browser-window--new}]
+page online. +
+
+No modifiers +
+[source, adoc, role="noclip"]
+----
+mdi:account[3x]
+----
+|mdi:account[3x]
+
+|5x
+|no modifier set
+|All icons can be found for preview at the
+link:{url-material-design-icons--cheatsheet}[MDI Icons, {browser-window--new}]
+page online. +
+
+No modifiers +
+[source, adoc, role="noclip"]
+----
+mdi:account[5x]
+----
+|mdi:account[5x]
+
+|5x
+|`mdi-rotate-45`
+|All icons can be found for preview at the
+link:{url-material-design-icons--cheatsheet}[MDI Icons, {browser-window--new}]
+page online. +
+
+Rotate 45 degrees +
+[source, adoc, role="noclip"]
+----
+mdi:account[5x mdi-rotate-45]
+----
+|mdi:account[5x mdi-rotate-45]
+
+|5x
+|`mdi-rotate-315`
+|All icons can be found for preview at the
+link:{url-material-design-icons--cheatsheet}[MDI Icons, {browser-window--new}]
+page online. +
+
+Rotate 315 degrees +
+[source, adoc, role="noclip"]
+----
+mdi:account[5x mdi-rotate-315]
+----
+|mdi:account[5x mdi-rotate-315]
+
+|5x
+|`mdi-light` +
+`mdi-flip-v`
+|All icons can be found for preview at the
+link:{url-material-design-icons--cheatsheet}[MDI Icons, {browser-window--new}]
+page online. +
+
+Color set to (md) light-grey and flipped vertical +
+[source, adoc, role="noclip"]
+----
+mdi:alert[5x mdi-light mdi-flip-v]
+----
+|mdi:alert[5x mdi-light mdi-flip-v]
+
+|5x
+|`md-indigo`
+|All icons can be found for preview at the
+link:{url-material-design-icons--cheatsheet}[MDI Icons, {browser-window--new}]
+page online. +
+
+Color set to (md) indigo +
+[source, adoc, role="noclip"]
+----
+mdi:alert[5x md-indigo]
+----
+|mdi:account[5x md-indigo]
+
+|5x
+|`md-pink`
+|All icons can be found for preview at the
+link:{url-material-design-icons--cheatsheet}[MDI Icons, {browser-window--new}]
+page online. +
+
+Color set to (md) pink +
+[source, adoc, role="noclip"]
+----
+mdi:alert[5x md-pink]
+----
+|mdi:account[5x md-pink]
+
+|5x
+|`mdi-spin`
+|All icons can be found for preview at the
+link:{url-material-design-icons--cheatsheet}[MDI Icons, {browser-window--new}]
+page online. +
+
+Added animation of type rotate (spin) +
+[source, adoc, role="noclip"]
+----
+mdi:loading[5x mdi-spin]
+----
+|mdi:loading[5x mdi-spin]
+
+|5x
+|`md-red-900` +
+`mdi-pulsed`
+|All icons can be found for preview at the
+link:{url-material-design-icons--cheatsheet}[MDI Icons, {browser-window--new}]
+page online. +
+
+Color  set to (md) color dark-red and added animation of type pulsed +
+[source, adoc, role="noclip"]
+----
+mdi:heart[5x md-red-900 mdi-pulsed]
+----
+|mdi:heart[5x md-red-900 mdi-pulsed]
+
+|===
+
+NOTE: Using Material Design Icons with Asciidoc is easy as an inline
+macro `mdi:` is available to place icons wherever you want. See more about
+this in section
+link:{url-roundtrip--asciidoc-extensions}#icon-fonts[Asciidoc Extensions].
+
+_MDI_ is a growing collection to allow designers and developers targeting
+various platforms to download icons in the format, color, and size they need
+for any project. The repo today contains 6000+ icons (v5.4.55) including
+converted icons from 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.
+
+== FontAwesome Icons
+
+_FontAwesome_ is a font and icon toolkit based on CSS, initially
+created by  _Dave Gandy_. The previous *version 4* was mainly for the use
+of Twitter Bootstrap *V3*. The new version *V5*, released in December 2017,
+focuses on all frameworks used for web development. Today, the *free FA*
+icon set comes with 1400+ icons included.
+
+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 V5 meets the Material Design idea (of _Google_), and in comparison
+to Version 4, the current version is much more than face-lifting. Version 5
+comes with more than 2300+ icons, but many are available only with the Pro
+license. For the Free version, only a subset of 900+ icons is available.
+
+NOTE: The CSS styles for FontAwesome V5 have been extended for the J1 Template
+to the same classes (and their respective names) for other Font Icon sets.
+Already existing styles like `fa-flip-vertical` are available as `fa-flip-v`
+as well.
+
+You can check out what icons available at
+link:{url-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 need to be
+noticed.
+
+If you haven't used V5 yet, it is highly recommended to visit the
+link:{url-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 into 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 to use as two inline
+macros `fab:` and `fas:` are available to place icons where ever you want.
+See more about this in section
+link:{url-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:{url-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:{url-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 icons can be found for preview at the
+link:{url-fontawesome--icons}[FA Gallery, {browser-window--new}] page online. +
+
+No modifiers +
+[source, adoc, role="noclip"]
+----
+fas:user[1x]
+----
+^|fas:user[1x]
+
+|3x
+|no modifier set
+|All icons can be found for preview at the
+link:{url-fontawesome--icons}[FA Gallery, {browser-window--new}] page online. +
+
+No modifiers +
+[source, adoc, role="noclip"]
+----
+fas:user[3x]
+----
+^|fas:user[3x]
+
+|5x
+|no modifier set
+|All icons can be found for preview at the
+link:{url-fontawesome--icons}[FA Gallery, {browser-window--new}] page online. +
+
+No modifiers +
+[source, adoc, role="noclip"]
+----
+fas:user[5x]
+----
+^|fas:user[5x]
+
+|5x
+|`fa-rotate-90`
+|All icons can be found for preview at the
+link:{url-fontawesome--icons}[FA Gallery, {browser-window--new}] page online. +
+
+Rotate 90 degrees +
+[source, adoc, role="noclip"]
+----
+fas:user[5x fa-rotate-90]
+----
+^|fas:user[5x fa-rotate-90]
+
+|5x
+|`md-indigo`
+|All icons can be found for preview at the
+link:{url-fontawesome--icons}[FA Gallery, {browser-window--new}] page online. +
+
+Color set to MD Indigo +
+[source, adoc, role="noclip"]
+----
+fas:user[5x md-indigo]
+----
+^|fas:user[5x md-indigo]
+
+|5x
+|`md-pink`
+|All icons can be found for preview at the
+link:{url-fontawesome--icons}[FA Gallery, {browser-window--new}] page online. +
+
+Color set to MD Pink +
+[source, adoc, role="noclip"]
+----
+fas:user[5x md-pink]
+----
+^|fas:user[5x md-pink]
+
+|5x
+|`mdi-light`
+|All icons can be found for preview at the
+link:{url-fontawesome--icons}[FA Gallery, {browser-window--new}] page online. +
+
+Color set to MD Light (Grey) +
+[source, adoc, role="noclip"]
+----
+fas:exclamation-triangle[5x mdi-light]
+----
+^|fas:exclamation-triangle[5x mdi-light]
+
+|5x
+|`fa-flip-v`
+|All icons can be found for preview at the
+link:{url-fontawesome--icons}[FA Gallery, {browser-window--new}] page online. +
+
+Orientation is set to *flipped vertical* +
+
+[source, adoc, role="noclip"]
+----
+fas:exclamation-triangle[5x fa-flip-v]
+----
+^|fas:exclamation-triangle[5x fa-flip-v]
+
+|5x
+|`md-red-900` +
+`fa-flip-v`
+
+|All icons can be found for preview at the
+link:{url-fontawesome--icons}[FA Gallery, {browser-window--new}] page online. +
+
+Color set to MD *dark red* and *flipped* vertical +
+
+[source, adoc, role="noclip"]
+----
+fas:exclamation-triangle[5x md-red-900 fa-flip-v]
+----
+^|fas:exclamation-triangle[5x md-red-900 fa-flip-v]
+
+|5x
+|`fa-spin`
+|All icons can be found for preview at the
+link:{url-fontawesome--icons}[FA Gallery, {browser-window--new}] page online. +
+
+Added animation of type *spin* (rotate) +
+
+[source, adoc, role="noclip"]
+----
+fas:circle-notch[5x fa-spin]
+----
+^|fas:circle-notch[5x fa-spin]
+
+|5x
+|`md-red-900` +
+`fa-pulsed`
+|All icons can be found for preview at the
+link:{url-fontawesome--icons}[FA Gallery, {browser-window--new}] page online. +
+
+Color set to MD *dark red* and added animation of type *pulsed* +
+
+[source, adoc, role="noclip"]
+----
+fas:heart[5x md-red-900 fa-pulsed]
+----
+^|fas:heart[5x md-red-900 fa-pulsed]
+
+|===
+
+
+== Iconify Icons
+
+MDI and FA are rich icon sets but designed for general use. Sometimes icons
+are missing in one of these fonts, like a specific brand or theme icon. An
+interesting solution for using font icons from a remote repository is
+link:{url-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 the J1 Template,
+the client is build-in and is loaded if Iconify is requested as a resource.
+To see what icon sets are available with that framework, check the page
+link:{url-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:{url-roundtrip--asciidoc-extensions}#icon-fonts[Asciidoc Extensions].
+
+Currently, over 40,000 vector icons are available for many different use cases.
+Find some examples below.
+
+.Brand Icons
+[cols="2a,3a,4a,^", options="header", width="100%", role="rtable mt-3"]
+|===
+|Size |Modifier |Markup |Render
+
+|3x
+|no modifier set
+|All icons can be found for preview at
+link:{url-iconify--brand-icons}[SVG Logos, {browser-window--new}] page online. +
+
+No modifiers +
+[source, adoc, role="noclip"]
+----
+iconify:logos:opensource[3x]
+----
+^|iconify:logos:opensource[3x]
+
+|3x
+|no modifier set
+|All icons can be found for preview at
+link:{url-iconify--brand-icons}[SVG Logos, {browser-window--new}] page online. +
+
+No modifiers +
+[source, adoc, role="noclip"]
+----
+iconify:logos:asciidoctor[3x]
+----
+^|iconify:logos:asciidoctor[3x]
+
+|3x
+|no modifier set
+|All icons can be found for preview at
+link:{url-iconify--brand-icons}[SVG Logos, {browser-window--new}] page online. +
+
+No modifiers +
+[source, adoc, role="noclip"]
+----
+iconify:logos:jupyter[3x]
+----
+^|iconify:logos:jupyter[3x]
+|===
+
+.Medical Icons
+[cols="2a,3a,4a,^", options="header", width="100%", role="rtable mt-3"]
+|===
+|Size |Modifier |Markup |Render
+
+|3x
+|no modifier set
+|All icons can be found for preview at
+link:{url-iconify--medical-icons}[Medical Icons, {browser-window--new}] page online. +
+
+No modifiers +
+[source, adoc, role="noclip"]
+----
+iconify:medical-icon:i-ear-nose-throat[3x]
+----
+^|iconify:medical-icon:i-ear-nose-throat[3x]
+
+|5x
+|`md-red-900`
+|All icons can be found for preview at
+link:{url-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]
+----
+^|iconify:medical-icon:i-ear-nose-throat[5x md-red-900]
+
+|===
+
+
+== What next
+
+Have you've enjoyed the possibilities J1 offers for managing and
+manipulating font icons. Do you think these icon sets can fit your needs?
+Using Iconify, for all topics, you will find a suitable icon. And it's simple.
+
+To check more features of the template, go for the
+link:{url-roundtrip--asciidoc-extensions}[Asciidoc Extensions] made for J1!