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