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èmeUn thème est un ensemble de fichiers qui déterminent l'apparence et la fonctionnalité d'un site web. Divi est un thè... Divi d’Elegant Themes, plusieurs icônes sont déjà intégrées dans les modules. Par exemple, dans le moduleUn module est un élément préconçu et personnalisable de Divi, tel que des textes, des images, des galeries ou encore... « 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èmeUn thème est un ensemble de fichiers qui déterminent l'apparence et la fonctionnalité d'un site web. Divi est un thè... en passant dans votre tableau de bord > Divi > Options du thèmeUn thème est un ensemble de fichiers qui déterminent l'apparence et la fonctionnalité d'un site web. Divi est un thè... > 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>
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 CSSLes CSS, ou feuilles de style en cascade, sont des fichiers qui contrôlent l'apparence d'un site web. Même si Divi pos... 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 moduleUn module est un élément préconçu et personnalisable de Divi, tel que des textes, des images, des galeries ou encore... 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 moduleUn module est un élément préconçu et personnalisable de Divi, tel que des textes, des images, des galeries ou encore.... 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 responsiveLe responsive est la capacité d'un site web à s'adapter à différentes tailles d'écran. Divi est conçu pour être e... design. Avec de la mise en forme supplémentaire, il est possible que celles-ci aient besoin d’un ajustement pour les formats mobiles.
