---
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:                          /"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[tag=tags]
include::{includedir}/attributes.asciidoc[tag=urls]
include::{includedir}/attributes.asciidoc[tag=data]

// Additional Asciidoc page attributes goes here
// -----------------------------------------------------------------------------

== Icon Fonts

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

* Material Design Icons
* Font Awesome Icons V5

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 tha 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.

.MDI Icon examples
----
Size of 1x: <i class="mdi mdi-1x mdi-account"></i>
Size of 3x: <i class="mdi mdi-3x mdi-account"></i>
Size of 5x: <i class="mdi mdi-5x mdi-account"></i>
Rotate 45 degrees: <i class="mdi mdi-5x mdi-account mdi-rotate-45">
Rotate 315 degrees: <i class="mdi mdi-5x mdi-account mdi-rotate-315">
MD colors|Indigo: <i class="mdi mdi-5x mdi-alert mdi-md-indigo"></i>
MD colors|Pink: <i class="mdi mdi-5x mdi-alert mdi-md-pink"></i>
Flip|Vertical, Light: <i class="mdi mdi-5x mdi-alert mdi-light mdi-flip-v"></i>
Animated|Spin: <i class="mdi mdi-5x mdi-loading mdi-spin">
Animated|Pulsed: <i class="mdi mdi-5x mdi-heart mdi-md-red-900 mdi-pulsed">
----

++++
<div class="mt-3 mb-4">
  <i class="mdi mdi-1x mdi-account"></i>
  <i class="mdi mdi-3x mdi-account"></i>
  <i class="mdi mdi-5x mdi-account"></i>
  <i class="mdi mdi-5x mdi-account mdi-rotate-45"></i>
  <i class="mdi mdi-5x mdi-account mdi-rotate-315"></i>
  <i class="mdi mdi-5x mdi-alert mdi-md-indigo"></i>
  <i class="mdi mdi-5x mdi-alert mdi-md-pink"></i>
  <i class="mdi mdi-5x mdi-alert mdi-light mdi-flip-v"></i>
  <i class="mdi mdi-5x mdi-loading mdi-spin"></i>
  <i class="mdi mdi-5x mdi-heart mdi-md-red-900 mdi-pulsed"></i>
</div>
++++

_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
link:{previewer-mdi}[Preview Page, window="_blank"] and check-out what's
possible using _MDI_ !

=== 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).

.Font Awesome V5 Icon examples
----
Size of 1x: <i class="fas fa-1x fa-user"></i>
Size of 3x: <i class="fas fa-3x fa-user"></i>
Size of 5x: <i class="fas fa-5x fa-user"></i>
Rotate 45 degrees: <i class="fas fa-3x fa-user fa-rotate-45">
Rotate 315 degrees: <i class="fas fa-3x fa-user fa-rotate-315">
MD colors|Indigo: <i class="fas fa-3x fa-exclamation-triangle mdi-md-indigo"></i>
MD colors|Pink: <i class="fas fa-3x fa-exclamation-triangle mdi-md-pink"></i>
Flip|Vertical, Light: <i class="fas fa-3x fa-exclamation-triangle mdi-light fa-flip-v"></i>
Animated|Spin: <i class="fas fa-3x fa-circle-notch fa-spin">
Animated|Pulsed: <i class="fas fa-3x fa-heart fa-md-red-900 fa-pulsed">
----

++++
<div class="mt-3 mb-4">
  <i class="fas fa-1x fa-user mr-2"></i>
  <i class="fas fa-3x fa-user mr-2"></i>
  <i class="fas fa-5x fa-user mr-2"></i>
  <i class="fas fa-3x fa-user fa-rotate-45 mr-2"></i>
  <i class="fas fa-3x fa-user fa-rotate-315 mr-2"></i>
  <i class="fas fa-3x fa-exclamation-triangle mdi-md-indigo mr-2"></i>
  <i class="fas fa-3x fa-exclamation-triangle mdi-md-pink mr-2"></i>
  <i class="fas fa-3x fa-exclamation-triangle mdi-light fa-flip-v mr-2"></i>
  <i class="fas fa-3x fa-circle-notch fa-spin mr-2"></i>
  <i class="fas fa-3x fa-heart mdi-md-red-900 fa-pulsed"></i>
</div>
++++

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 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 
link:{previewer-mdi}[Preview Page, window="_blank"].

You can checkout what icons available at link:{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
link:{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 link:{roundtrip-asciidoc-extensions}[
Asciidoc Extensions] made for J1!