--- 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[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 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[1x] ---- ^|mdi:account[1x] |3x |no modifier set |All `icon_name` can be found on the Preview page for *MDI Icon Previewer* [source, adoc, role="noclip"] ---- mdi:account[3x] ---- ^|mdi:account[3x] |5x |no modifier set |All `icon_name` can be found on the Preview page for *MDI Icon Previewer* [source, adoc, role="noclip"] ---- mdi:account[5x] ---- ^|mdi:account[5x] |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 link:{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[1x] ---- ^|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[3x] ---- ^|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[5x] ---- ^|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 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!