title: Roundtrip tagline: Icon Fonts description: J1 Template Roundtrip - Icon Fonts

tags: [ Template, Roundtrip, Material, Design, MDI, Font Awesome, Icon, Fonts ] index: [] categories: [ pages ]

permalink: /pages/public/start/roundtrip/mdi_icon_font/ regenerate: false

resources: [] resource_options:

- masthead:
    opacity:                          0.5
    slides:
      - url:                          /assets/images/pages/roundtrip/icon-fonts-1920.jpg
        alt:                          Photo by Harpal Singh on Unsplash
        caption:                      Photo by Harpal Singh on Unsplash
        caption_href:                 https://unsplash.com/aquatium/portfolio
        caption_color:                rgba_lighten_800

// Enable the Liquid Preprocessor // —————————————————————————– :page-liquid:

// Set other global page attributes here // —————————————————————————–

{% comment %} Liquid procedures ————————————————————— {% endcomment %} {% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}

// NOTE: Initialize entry document paths // —————————————————————————– {% include {{set_env_entry_document}} init_folders=all %}

// Load tags and urls // include::{includedir}/attributes.asciidoc include::{includedir}/attributes.asciidoc include::{includedir}/attributes.asciidoc

// Additional Asciidoc page attributes goes here // —————————————————————————–

Icon Fonts

J1 template supports 2 very popular icons font sets out-of-the-box:

Both icon sets are very good in design and have a rich set of different Icons for many categories used for the Web. See below some details for MDI and _Font Awesome_.

Material Design Icons

The primary icon set for J1 Template are _Material Design Icons_, because it is an rich set providing more than 2100+ icons. From a design prospective, MDI has an excellent Material Design support an comes with the original icon set created by Google build-in.

_Material Design Icons_ (MDI) is a very helpful design resource for Web Design that is based on *Google's Material Design*. MDI is a community-driven project to create an increased icon-set based on Google's official repository and MD style specification.

.Material Design Icons

cols=“2a,3a,4a,3a”, options=“header”, width=“100%”, role=“rtable_v table-responsive mt-3”

|=============================================================================== |Size |Modifier |Markup |Render

|1x |no modifier set |All `icon_name` can be found on the Preview page for *MDI Icon Previewer*

source, adoc, role=“noclip”

mdi:account


^|mdi:account

|3x |no modifier set |All `icon_name` can be found on the Preview page for *MDI Icon Previewer*

source, adoc, role=“noclip”

mdi:account


^|mdi:account

|5x |no modifier set |All `icon_name` can be found on the Preview page for *MDI Icon Previewer*

source, adoc, role=“noclip”

mdi:account


^|mdi:account

|5x |`mdi-rotate-45` |Rotate 45 degrees

source, adoc, role=“noclip”

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


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

|5x |`mdi-rotate-315` |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` |Color set to MDI 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` |Color set to MDI Indigo

source, adoc, role=“noclip”

mdi:alert[5x md-indigo]


^|mdi:account[5x md-indigo]

|5x |`md-pink` |Color set to MDI Pink

source, adoc, role=“noclip”

mdi:alert[5x md-pink]


^|mdi:account[5x md-pink]

|5x |`mdi-spin` |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` |Color set to MDI 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]

|===============================================================================

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 contains today 2100+ icons plus 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.

For MDI a *Preview Page* is available to explore what can be done base on the J1 implemetation regarding sizes, colors, animations etc. Go for the {previewer-mdi}[Preview Page, window=“_blank”] and check-out what's possible using MDI font icons!

Font Awesome Icons

Font Awesome is a font and icon toolkit based on CSS and LESS. It was made by Dave Gandy. For version 4 mainly for use with Twitter Bootstrap V3. The new version, Font Awesome V5 was officially released on December 7, 2017 today with 2300+ icons included. Version 5 comes in two packages: Font Awesome Free and the proprietary Font Awesome Pro (available for a license fee).

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 MIT License.

.Font Awesome Icons

cols=“2a,3a,4a,3a”, options=“header”, width=“100%”, role=“rtable_v table-responsive mt-3”

|=============================================================================== |Size |Modifier |Markup |Render

|1x |no modifier set |All `icon_name` can be found on the Preview page for *MDI Icon Previewer*

source, adoc, role=“noclip”

fas:user


^|fas:user[1x mt-4]

|3x |no modifier set |All `icon_name` can be found on the Preview page for *MDI Icon Previewer*

source, adoc, role=“noclip”

fas:user


^|fas:user[3x mt-4]

|5x |no modifier set |All `icon_name` can be found on the Preview page for *MDI Icon Previewer*

source, adoc, role=“noclip”

fas:user


^|fas:user[5x mt-4]

|5x |`fa-rotate-45` |Rotate 45 degrees

source, adoc, role=“noclip”

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


^|fas:user[5x fa-rotate-45 mt-4]

|5x |`fa-rotate-315` |Rotate 315 degrees

source, adoc, role=“noclip”

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


^|fas:user[5x fa-rotate-315 mt-4]

|5x |`mdi-light` + `fa-flip-v` |Color 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 mt-4]

|5x |`md-indigo` |Color set to MDI Indigo

source, adoc, role=“noclip”

fas:alert[5x md-indigo]


^|fas:user[5x md-indigo mt-4]

|5x |`md-pink` |Color set to MDI Pink

source, adoc, role=“noclip”

fas:alert[5x md-pink]


^|fas:user[5x md-pink mt-4]

|5x |`fa-spin` |Added animation of type Rotate (Spin)

source, adoc, role=“noclip”

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


^|fas:circle-notch[5x fa-spin mt-4]

|5x |`md-red-900` + `fa-pulsed` |Color 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 mt-4]

|===============================================================================

Font Awesome V5 meets the Material Design idea (of Google) and in compare to Version 4, the current version is much more than a face-lifting. The Version 5 comes with more than 2300+ icons but many of them are available with the Pro license only. For the Free version, a subset of 900+ icons is available.

NOTE: The CSS styles for Font Awesome V5 has been extended for J1 Template to the same styles (and their respective names) as for other Font Icon sets. Already existing styles like `fa-flip-vertical` is available as `fa-flip-v` as well. See all styles that can be used with the MDI {previewer-mdi}[Preview Page, window=“_blank”].

You can checkout what icons available at {fontawesome-icons}[Font Awesome Icons, window=“_blank”]. _Font Awesome_ V5 is fully integrated - no need for additional resources to load. But in compare 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 {fontawesome-get-started}[Get started, window=“_blank”] pages to learn the basics and features and styles.

What's next?

Hopefully you've enjoyed the possibilities J1 offers for managing and manipulating *Font Icons*. Do you think these Icons sets fit your needs?

We hope so.

To check more features, go for the {roundtrip-asciidoc-extensions}[ Asciidoc Extensions] made for J1!