j1-template 2022.5.0.rc3 → 2022.5.1.rc0

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

@@ -1,579 +0,0 @@
----
-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!