Alert - I have split up this Huge website into smaller ones. Please check out the new site URLs on the Home page for the latest course content. This website will not be updated anymore. Thanks for your patience and support! 🙏

Using Lordicons, Fontawesome Icons,Academicons, and Iconify Icons

Author

Arvind V.

Published

January 9, 2023

Modified

Invalid Date

Introduction

This is just a compilation of the example files from the Quarto website, so that I can have ready-made code to copy and paste.

Installation

Type these in your Terminal:

  • Iconify: quarto install extension mcanouil/quarto-iconify
  • FontAwesome: quarto install extension quarto-ext/fontawesome
  • Lordicons: quarto install extension jmgirard/lordicon
  • Academicons: quarto install extension schochastics/academicons

These extensions allows you to use a variety of icons in your Quarto HTML documents.

Using Lordicon Shortcodes

The {{< li >}} shortcode renders an icon (specified by its code) after downloading it the lordicon CDN. The {{< lif >}} shortcode renders an icon (specified by its filepath) from a local .json file. Both shortcodes support the same arguments for customization, described below.

Pseudocode Example Code Rendered
{{< li code >}} {{< li wlpxtupd >}}

{{< lif file >}} {{< lif church.json >}}

Triggers

trigger controls the icon’s animation type. When using the loop or loop-on-hover triggers, you can also set an optional delay (in ms) between loops.

Shortcode Icon
{{< li wxnxiano >}}

{{< li wxnxiano trigger=click >}}

{{< li wxnxiano trigger=hover >}}

{{< li wxnxiano trigger=loop >}}

{{< li wxnxiano trigger=loop delay=1000 >}}

{{< li wxnxiano trigger=loop-on-hover >}}

{{< li wxnxiano trigger=loop-on-hover delay=1000 >}}

{{< li wxnxiano trigger=morph >}}

{{< li wxnxiano trigger=boomerang >}}

Speed

speed controls how quickly the icon’s animation plays.

Shortcode Icon
{{< li lupuorrc trigger=loop speed=0.5 >}}

{{< li lupuorrc trigger=loop speed=1.0 >}}

{{< li lupuorrc trigger=loop speed=2.0 >}}

Colors

colors controls the icon’s coloring. Outline icons typically have just a primary and secondary color, but flat and lineal icons can have many more. Each color should be given in rank:color format (where ranks are primary, secondary, tertiary, etc.) and multiple colors should be separated by commas. Colors can be given in HTML color names or hexcodes.

Shortcode Icon
{{< li lupuorrc >}}

{{< li lupuorrc colors=primary:gold >}}

{{< li lupuorrc colors=primary:gray,secondary:orange >}}

{{< li lupuorrc colors=primary:#4030e8,secondary:#ee66aa >}}

Stroke

stroke controls how thick the lines in an icon are.

Shortcode Icon
{{< li lupuorrc stroke=50 >}}

{{< li lupuorrc stroke=100 >}}

{{< li lupuorrc stroke=150 >}}

Scale

scale controls how large or zoomed in the icon is.

Shortcode Icon
{{< li lupuorrc scale=25 >}}

{{< li lupuorrc scale=50 >}}

{{< li lupuorrc scale=100 >}}

Axis X

x controls the horizontal position of the center of the icon.

Shortcode Icon
{{< li lupuorrc x=25 >}}

{{< li lupuorrc x=50 >}}

{{< li lupuorrc x=100 >}}

Axis Y

y controls the vertical position of the center of the icon.

Shortcode Icon
{{< li lupuorrc y=25 >}}

{{< li lupuorrc y=50 >}}

{{< li lupuorrc y=100 >}}

Using Academicons Shortcodes

This extension allows you to use academicons in your Quarto HTML documents. It provides an {{< ai >}} shortcode:

  • Mandatory <icon-name>:

    {{< ai <icon-name> >}}

  • Optional <size=...>:

    {{< ai <icon-name> <size=...> >}}

For example:

Shortcode Icon
{{< ai arxiv >}}

{{< ai google-scholar >}}

{{< ai open-access >}}

{{< ai open-access size=5x >}}

Using Fontawesome Icons

This extension allows you to use font-awesome icons in your Quarto HTML and PDF documents. It provides an {{< fa >}} shortcode:

  • Mandatory <icon-name>:

    {{< fa <icon-name> >}}

  • Optional <group>, <size=...>, and <title=...>:

    {{< fa <group> <icon-name> <size=...> <title=...> >}}

For example:

Shortcode Icon
{{< fa thumbs-up >}}

{{< fa folder >}}

{{< fa chess-pawn >}}

{{< fa brands bluetooth >}}

{{< fa brands twitter size=2xl >}} (HTML only)

{{< fa brands github size=5x >}} (HTML only)

{{< fa battery-half size=Huge >}}

{{< fa envelope title="An envelope" >}}

Using Iconify Shortcodes

This extension allows you to use Iconify icons in your Quarto HTML documents. It provides an {{< iconify >}} shortcode:

  • Mandatory <icon-name>:

    {{< iconify <icon-name> >}}

  • Optional <set> (default is fluent-emoji) <size=...>, <width=...>, <height=...>, <flip=...>, and <rotate=...>:

    {{< iconify <set> <icon-name> <size=...> <width=...> <height=...> <flip=...> <rotate=...> >}}

    If <size=...> is defined, <width=...> and <height=...> are not used.
    See https://docs.iconify.design/iconify-icon/ for more details.

For example:

Shortcode Icon
{{< iconify exploding-head >}}

{{< iconify exploding-head size=2xl >}}

{{< iconify exploding-head size=5x rotate=180deg >}}

{{< iconify exploding-head size=Huge >}}

{{< iconify fluent-emoji-high-contrast 1st-place-medal >}}

{{< iconify twemoji 1st-place-medal >}}

{{< iconify line-md loading-alt-loop >}}

{{< iconify fa6-brands apple width=50px height=10px rotate=90deg flip=vertical >}}

Back to top