Hugo - Shortcode for using Font Awesome icons

2022-02-14 HUGO FONT AWESOME

Updated on 2022-10-15

The previous post was dedicated to Integrating Font Awesome in Hugo. The shortcode proposed here simplifies the use of Font Awesome icons on pages created with Hugo.

Source code for the shortcode

The HTML file of the shortcode layouts/shortcodes/fa.html contains only:

<i class="{{- .Get 0 -}}"></i>

Using the shortcode

The sentence "is an icon for downloading" is obtained with:

`{{< fa "fas fa-download" >}}` is  an icon for downloading

We can also apply personalized styles. For example, we define a custom-fa1 style:

.custom-fa1 {
  font-size: 3rem;
  color: green;
  background-color: lightgrey;
  border: 4px solid green;
  border-radius: 12px;
  padding: 4px;
}

Then add the class custom-fa1 after other classes:

This gives this big chess queen icon: {{< fa "fa-solid fa-chess-queen custom-fa1" >}}

This gives this big chess queen icon: