--- 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_simple permalink: /pages/public/learn/roundtrip/mdi_icon_font/ regenerate: false resources: [ animate, iconify ] resource_options: - attic: padding_top: 400 padding_bottom: 50 opacity: 0.5 slides: - url: /assets/images/pages/roundtrip/icon-fonts-1920x1280-bw.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: :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 <> and <>. 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 <> 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. + Colour 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. + Colour 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. + Colour 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. + 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] ---- |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 |`mdi-light` + `fa-flip-v` |All icons can be found for preview at the link:{url-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] ---- ^|fas:exclamation-triangle[5x mdi-light fa-flip-v] |5x |`md-indigo` |All icons can be found for preview at the link:{url-fontawesome--icons}[FA Gallery, {browser-window--new}] page online. + Colour set to MDI Indigo + [source, adoc, role="noclip"] ---- fas:alert[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. + Colour set to MDI Pink + [source, adoc, role="noclip"] ---- fas:alert[5x md-pink] ---- ^|fas:user[5x md-pink] |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 Rotate (Spin) + [source, adoc, role="noclip"] ---- fas:circle-notch[5x fa-spin] ---- ^|fas:circle-notch[5x fa-spin] |5x |`md-red-900` + `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. + Colour set to MDI 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] |=== .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!