articles icones

Comment insérer des icônes font-awesome sur votre site WordPress avec Divi ?

Marlène

2 novembre 2018

Afin de rendre votre site web plus original et moderne, peut-être avez-vous besoin d’y insérer des icônes ou des pictogrammes ? Illustrer vos services ou mettre en avant vos points forts sont de bons exemples pour utiliser des icônes.

Avec le thème Divi d’Elegant Themes, plusieurs icônes sont déjà intégrées dans les modules. Par exemple, dans le module « Blurbs », vous pouvez intégrer un pictogramme accompagné d’un texte. Cependant, cette sélection ne suffira peut-être pas à la mise en forme de vos contenus.

Comment créer des contenus originaux avec des pictogrammes qui ne sont pas présents dans Divi ?

Recherchez sur font-awesome les visuels proches de votre idée. Grâce à la barre d’outils sur la gauche, plusieurs domaines peuvent être filtrés. Vous pouvez également spécifier si vous souhaitez les icônes gratuites seulement, ou celles premium. Il suffit alors de cocher les options de la liste.

Pour commencer, les icônes free seront largement suffisantes. Si vous voulez aller plus loin dans le webdesign ou être sûr d’avoir une page web plus originale, vous pouvez vous orienter vers des versions professionnelles.

Pour les intégrer à votre site Internet, n’essayez pas de faire de copier-coller des éléments.

Intégrez le code dans la balise head de votre thème en passant dans votre tableau de bord > Divi > Options du thème > Integration > Ajouter ligne de code à la head de votre blog.

Après avoir défini les bonnes icônes pour votre site, retournez sur votre page ou votre article et insérer le code indiqué par font-awesome comprenant des balises i class. Par exemple et pour intégrer un crayon comme ci-dessous, le code correspondant est le suivant :

<i class="fas fa-pencil-alt"></i>

font-awesome pencil

Mettre en forme les icônes

Chaque pictogramme font-awesome correspond à un code html particulier. Avec ce seul code source, celui-ci ne pourra être personnalisé avec un code couleur ou être redimentionné. Pour customiser votre icône, un code CSS est requis. Celui-ci est identique à celui utilisé pour personnaliser une police de caractère. Pour ajouter une personnalisation, cliquez sur l’éditeur html de votre module pour repérer les balises.

Si nous reprenons l’exemple précédent et que nous voulons la coloriser avec la couleur de L’Art de la Toile et la grossir, nous aurons le code suivant :

<div style="color: #c3505d; font-size: 60px;">
  <i class="fas fa-pencil-alt"></i>
</div>

Voici le résultat

Insérer un hyperlien

Pour rendre une icône cliquable, rendez-vous sur la partie html de votre module. Après avoir identifié le code du pictogramme, cliquez sur l’option lien pour y insérer l’URL de votre choix. Si vous créez un lien externe, pensez à cocher l’option de l’ouverture dans une nouvelle fenêtre pour ne pas perdre totalement l’internaute.

S’il n’est pas possible de sélectionner l’icône dans le wysiwyg, insérez une balise de lien sur le code vu ci-dessus. Par exemple, vous pouvez avoir la forme suivante :

<a href="http://monsite.com"><span style="color: #c3505d; font-size: 60px;">
  <i class="fas fa-pencil-alt"></i>
  </span>
</a>

 En conclusion, utiliser des icônes du site font-awesome est un bon moyen de vous différencier des sites Divi classiques. Grâce à elles, l’apparence de votre site est plus professionnelle. Par ailleurs, vérifier bien que ces icônes sont correctes en responsive design. Avec de la mise en forme supplémentaire, il est possible que celles-ci aient besoin d’un ajustement pour les formats mobiles.

dégradé noir gris