Hugo - Shortcode pour l'utilisation des icĂ´nes de Font Awesome

2022-02-14 HUGO FONT AWESOME

Mis Ă  jour le 2022-10-15

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 :