Jekyll One

QuickSearch

J1 Template supports popular icon font sets. This icon sets offer a rich set of different elements for many symbols and categories widely used for the Web.

With J1 Template, the following icon fonts are available out-of-the-box:

  • Material Design Icons (MDI)

  • Light MDI Icons (MDIL)

  • FontAwesome Icons V5 (FA)

  • Iconify-Framework Icons (IF)

MDI and FA icons are excellent in design and provide 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-Framework icons is not a locally stored icon-set like MDI or FA Icons for example. All IF elements are loaded remotely over the Internet using the so-called Unified Open Source Icon Framework — see section Iconify-Framework Icons for more information.

5-10 Minutes to read

Material Design Icons

The primary icon-set for the J1 Template is Material Design Icons, a rich set providing more than 7200+ icons for the current version v7 of March 2023. MDI has excellent support of the Material Design (MD) styles defined by Google and comes with Googles' original MD icon set build-in.

Material Design Icons is a beneficial design resource for Web Design based on Google's Material Design. The MDI icon set is a community-driven project to provide a large number of different icons for the Web.

Table 1. Material Design Icons
Size Modifier Markup Render

1x

no modifier set

All icons can be found for preview at the Font Icon Picker page online.

No modifiers

mdi:account[1x]

3x

no modifier set

All icons can be found for preview at the Font Icon Picker page online.

No modifiers

mdi:account[3x]

5x

no modifier set

All icons can be found for preview at the Font Icon Picker page online.

No modifiers

mdi:account[5x]

5x

mdi-rotate-45

All icons can be found for preview at the Font Icon Picker page online.

Rotate 45 degrees

mdi:account[5x mdi-rotate-45]

5x

mdi-rotate-315

All icons can be found for preview at the Font Icon Picker page online.

Rotate 315 degrees

mdi:account[5x mdi-rotate-315]

5x

mdi-light
mdi-flip-v

All icons can be found for preview at the Font Icon Picker page online.

Color set to (md) light-grey and flipped vertical

mdi:alert[5x mdi-light mdi-flip-v]

5x

md-indigo

All icons can be found for preview at the Font Icon Picker page online.

Color set to (md) indigo

mdi:alert[5x md-indigo]

5x

md-pink

All icons can be found for preview at the Font Icon Picker page online.

Color set to (md) pink

mdi:alert[5x md-pink]

5x

mdi-spin

All icons can be found for preview at the Font Icon Picker page online.

Added animation of type rotate (spin)

mdi:loading[5x mdi-spin]

5x

md-red-900
mdi-pulsed

All icons can be found for preview at the Font Icon Picker page online.

Color set to (md) color dark-red and added animation of type pulsed

mdi:heart[5x md-red-900 mdi-pulsed]

Using Material Design Icons is easy as the inline macro mdi: for Asciidoc is available to place icons automatically wherever you want. See more about this in section Asciidoc Extensions.

J1 Template supports the full set of MDI for the Web. The icon set is fully integrated and can be used out-of-the-box.

Light Material Design Icons

An alternative to the default MDI-based icon set for the J1 Template is Material Design Light Icons — the set is providing currently 260+ icons for the latest version.

Table 2. Material Design Light Icons
Size Modifier Markup Render

1x

no modifier set

All icons can be found for preview at the Font Icon Picker page online.

No modifiers

mdil:account[1x]

3x

no modifier set

All icons can be found for preview at the Font Icon Picker page online.

No modifiers

mdil:account[3x]

5x

no modifier set

All icons can be found for preview at the Font Icon Picker page online.

No modifiers

mdil:account[5x]

5x

mdi-rotate-45

All icons can be found for preview at the Font Icon Picker page online.

Rotate 45 degrees

mdil:account[5x mdi-rotate-45]

5x

mdi-rotate-315

All icons can be found for preview at the Font Icon Picker page online.

Rotate 315 degrees

mdil:account[5x mdi-rotate-315]

5x

mdi-light
mdi-flip-v

All icons can be found for preview at the Font Icon Picker page online.

Color set to (md) light-grey and flipped vertical

mdil:alert[5x mdi-light mdi-flip-v]

5x

md-indigo

All icons can be found for preview at the Font Icon Picker page online.

Color set to (md) indigo

mdil:alert[5x md-indigo]

5x

md-pink

All icons can be found for preview at the Font Icon Picker page online.

Color set to (md) pink

mdil:alert[5x md-pink]

5x

md-red-900
mdi-pulsed

All icons can be found for preview at the Font Icon Picker page online.

Color set to (md) color dark-red and added animation of type pulsed

mdil:heart[5x md-red-900 mdi-pulsed]

FontAwesome Icons

FontAwesome is icon toolkit based on CSS, initially created by Dave Gandy. The previous version 4 was mainly for the use of Twitter Bootstrap V3. The current 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. The new version 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.

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 flipping fa-flip-vertical are available as fa-flip-v as well.

You can check out what icons available at FontAwesome Icons. The icon set of version V5 is fully integrated - no need for additional resources to load.

In comparison to FA Version 4, a lot of differences are to be noticed If you haven’t used V5 yet, it is highly recommended to visit the Get started pages to learn the basics and features and styles for the current version.

With version V5 of FontAwesome, the icon set is split into two general parts:

  • Standard icons, indicated by FAS

  • Brand icons, including symbols for companies and brands, indicated by FAB

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 Asciidoc Extensions.

Find below examples of both sets and how to use with J1 Template.

Brand icons

Table 3. FontAwesome Branding Icons (FAB)
Size Modifier Markup Render

2x

no modifier set

All icons can be found for preview at the FA Gallery page online.

No modifiers

fab:google[2x]

5x

md-blue

All icons can be found for preview at the FA Gallery page online.

Color blue

fab:blogger[5x md-blue]

Standard icons

Table 4. FontAwesome Standard Icons (FAS)
Size Modifier Markup Render

1x

no modifier set

All icons can be found for preview at the FA Gallery page online.

No modifiers

fas:user[1x]

3x

no modifier set

All icons can be found for preview at the FA Gallery page online.

No modifiers

fas:user[3x]

5x

no modifier set

All icons can be found for preview at the FA Gallery page online.

No modifiers

fas:user[5x]

5x

fa-rotate-90

All icons can be found for preview at the FA Gallery page online.

Rotate 90 degrees

fas:user[5x fa-rotate-90]

5x

md-indigo

All icons can be found for preview at the FA Gallery page online.

Color set to MD Indigo

fas:user[5x md-indigo]

5x

md-pink

All icons can be found for preview at the FA Gallery page online.

Color set to MD Pink

fas:user[5x md-pink]

5x

mdi-light

All icons can be found for preview at the FA Gallery page online.

Color set to MD Light (Grey)

fas:exclamation-triangle[5x mdi-light]

5x

fa-flip-v

All icons can be found for preview at the FA Gallery page online.

Orientation is set to flipped vertical

fas:exclamation-triangle[5x fa-flip-v]

5x

md-red-900
fa-flip-v

All icons can be found for preview at the FA Gallery page online.

Color set to MD dark red and flipped vertical

fas:exclamation-triangle[5x md-red-900 fa-flip-v]

5x

fa-spin

All icons can be found for preview at the FA Gallery page online.

Added animation of type spin (rotate)

fas:circle-notch[5x fa-spin]

5x

md-red-900
fa-pulsed

All icons can be found for preview at the FA Gallery page online.

Color set to MD dark red and added animation of type pulsed

fas:heart[5x md-red-900 fa-pulsed]

Iconify-Framework Icons

Sometimes icons are missing like a specific brand or theme icon. An interesting solution for using icons from a remote repository are Iconify-Framework Icons. the Iconify-Framework consuse a so-called Unified Open Source Icon framework that makes it possible to use icons from multiple sets.

To access that framework, a Javascript client is needed. For the J1 Template, the client is build-in and is loaded if Iconify-Framework icons are requested as a resource. To see what icon sets are available with that framework, check the page Iconify-Framework Icon Sets.

Using Iconify-Framework icons with J1 Template is quite easy. An inline macro iconify: for Asciidoc is available to place icons where ever you want. See more about this in section Asciidoc Extensions.

Currently, over 40,000 vector icons are available for many different use cases. Find some examples below.

Table 5. Brand Icons
Size Modifier Markup Render

3x

no modifier set

All icons can be found for preview at SVG Logos page online.

No modifiers

iconify:logos:opensource[3x]

3x

no modifier set

All icons can be found for preview at SVG Logos page online.

No modifiers

iconify:logos:asciidoctor[3x]

3x

no modifier set

All icons can be found for preview at SVG Logos page online.

No modifiers

iconify:logos:jupyter[3x]

Table 6. Medical Icons
Size Modifier Markup Render

3x

no modifier set

All icons can be found for preview at Medical Icons page online.

No modifiers

iconify:medical-icon:i-ear-nose-throat[3x]

5x

md-red-900

All icons can be found for preview at Medical Icons page online.

Color (md) red

iconify:medical-icon:i-ear-nose-throat[5x md-red-900]

What next

Have you’ve enjoyed the possibilities The template system offers for using font icons? Do you think these icon sets can fit your needs? For sure, using Iconify, for all topics, you will find a suitable icon.

J1 Template implements some handy Ruby-based enhancements for the markup language Asciidoc. Providing extensions for a Jekyll theme is a unique feature of Jekyll One compared to other Jekyll themes and templates.

To make the use of modules for the template easier, some more extensions support you to place for example lightboxes, sliders, or galleries using Asciidoc block elements. I’m sure, you’ll love it.

Check the more J1 Template offer and go for Asciidoc Extensions made for J1!