1 - Introduction
Ce tutoriel est disponible pour les packs suivants :
Classique
Premium
Master +
Les icônes FontAwesome sont connus dans le domaine du WebDesign. Celles-ci permettent d’afficher, suivant vos envies, diverses icônes dans des domaines et des styles variés.
Afin d’en profiter, rendez-vous dans la personnalisation de votre thème, puis Paramètres de thème > Addons.
Cocher ensuite le paramètre Activer les icônes FontAwesome. |  |
ATTENTION : Cocher ce paramètre chargera la banque d’icône en entière, ce qui ralentira (peu mais tout de même) le chargement de votre site.
Ne cocher ce paramètre que si vous êtes amené à utiliser plusieurs icônes à travers votre site, dans le cas contraire, nous vous le déconseillons.
2 - Utilisation
Afin de choisir vos icônes, rendez-vous sur le site de FontAwesome, pour leur version 6.1.1.
Prenons l’exemple d’une icône Recyclage :
Cochez Solid / Regular / Light / Thin / Duotone suivant le design que vous souhaitez adopté.
Cliquez ensuite sur le résultat de votre choix :
Enfin, copiez le bout de code HTML affiché dans la popup en cliquant dessus.
<i class="fa-thin fa-recycle"></i>
Une fois copié, vous pouvez le collez dans un champ texte HTML - Liquid sur votre Phantom Thème. Que ce soit dans une section Code HTML Personnalisé ou encore un bloc Personnalisé dans des sections Produit, Collection, Pied de page, etc...
Vous pouvez également également les glisser dans vos descriptions de produit / collection.
Pour ceci, étant un code HTML, vous devrez l’insérez au bon endroit en suivant la démarche suivante :
Ouvrez une fiche produit
Cliquez sur le bouton pour afficher la description sous format HTML
Choisissez l’endroit puis copiez l’icône
Enregistrer
Voici la méthodologie en image :
Comme vu ci-dessus, l’icône peut-être inséré dans d’autres balises, comme ici une balise <p> permettant l’affichage de l’icône en amont de la ligne :
Afin d’aligner verticalement l’îcone au texte, et ajouter une marge à droite de celui-ci pour décoller le texte, vous noterez l’icône de cette manière :
<i class="fa-brands fa-pinterest" style="margin-bottom: 2px;margin-right: 5px;"></i>
Ce qui donnera :