Hugo - Shortcode pour les icônes de Font Awesome

14/02/2022 HUGO FONT AWESOME

Mis à jour le 15/10/2022

Le billet précédent était dédié à l'intégration de Font Awesome dans Hugo. Le shortcode proposé ici facilite l'utilisation des icônes de Font Awesome dans les pages réalisées avec Hugo.

Code source du shortcode

Le fichier source HTML du shortcode layouts/shortcodes/fa.html contient simplement :

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

Utilisation du shortcode

Ceci est une icône de téléchargement.

Est obtenu avec :

Ceci {{< fa "fas fa-download" >}} est une icône de téléchargement.

On peut aussi appliquer des styles personnalisés. Par exemple on définit un style custom-fa1 :

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

Puis on ajoute la classe custom-fa1 à la suite des autres classes :

Ce qui donne cette icône d'une Dame aux échecs : {{< fa "fa-solid fa-chess-queen custom-fa1" >}}

Ce qui donne cette icône d'une Dame aux échecs :