Comment créer des boutons de police d'icônes avec Divi

Les boutons de police d'icônes ont de nombreuses utilisations dans le monde de la conception Web. Étant donné que les icônes de police restent nettes en couleur et en conception lorsqu'elles s'adaptent à différentes tailles, il est logique de les utiliser dans les boutons. Et, créer un bouton de police d'icônes dans Divi est en fait assez facile à l'aide de la police d'icônes élégante. Dans ce tutoriel, je vais vous montrer comment utiliser les polices d'icônes avec le module de boutons de Divi pour créer un seul bouton d'icône.

Voici quelques-uns des points saillants de ce didacticiel :

• Comment utiliser la police élégante pour ajouter une icône en tant que texte de bouton
• Comment ajouter un rembourrage et un rayon de bordure qui garantissent que le bouton prend la forme d'un carré ou d'un cercle parfait
• Comment remplacer l'icône du bouton par une icône différente au survol
• Comment positionner une icône de bouton pour chevaucher une image
• et plus…

Aperçu

Voici un aperçu de ce qui vous attend…

De quoi as-tu besoin

Pour ce tutoriel, j'utiliserai les éléments suivants :

• Thème Divi (évidemment)
• Les icônes de polices élégantes – Une fois que vous aurez téléchargé le fichier zip à partir du billet de blog, nous ferons glisser le fichier de polices eleganticons.ttf à utiliser comme police personnalisée pour notre module de boutons.
• La mise en page de la page d'accueil du Bed & Breakfast (disponible gratuitement auprès du Divi Builder)

Commençons!

Ajout de la police d'icône élégante à votre module de boutons

Ajouter un module de boutons

Pour commencer, créez une nouvelle page et déployez le générateur visuel. Choisissez « Créer à partir de zéro », puis, une fois le générateur visuel déployé, ajoutez une ligne à une colonne à la section, puis ajoutez un module de bouton à la ligne.

Faites glisser la police d'icône élégante

Pour obtenir la police Elegant Icon, rendez-vous sur le billet de blog Elegant Icon Font et téléchargez le fichier de police. Extrayez le contenu du fichier zip et recherchez les fichiers de polices d'icônes élégantes en accédant à elegant_font > HTML CSS > fonts. Ensuite, faites glisser le fichier "ElegantIcons.ttf" depuis votre fichier informatique et déposez-le dans le constructeur visuel.

Cela fera apparaître automatiquement le modal Télécharger la police. Cliquez simplement sur le bouton de téléchargement pour télécharger la police sur le Divi Builder.

Vous aurez désormais accès à l'élégante police d'icônes lors de la personnalisation de n'importe quelle police de module dans le générateur visuel.

Accédez aux paramètres du module de boutons et mettez à jour la police des boutons avec la nouvelle police d'icônes élégante que vous venez de télécharger. Il apparaîtra dans la liste des icônes sous « Polices personnalisées ».

Vous remarquerez peut-être que maintenant le texte de votre bouton a été transformé en un tas d'icônes. En effet, chaque caractère entré dans la zone de saisie de texte du bouton a désormais une icône qui correspond à la lettre/le caractère actuellement utilisé.

Comme nous n'avons besoin que d'une seule icône pour notre bouton, vous pouvez sélectionner n'importe quel caractère sur le clavier pour générer l'icône associée à ce caractère. Par exemple, entrez le chiffre 5 pour le texte de votre bouton pour obtenir une flèche en chevron vers la droite.

Échanger des icônes de bouton au survol

Comme vous le savez, le module de boutons inclut la possibilité d'ajouter des icônes au survol. Nous pouvons utiliser cette fonctionnalité pour remplacer la police de l'icône par l'icône de survol pour un bel effet de survol. Tout ce que nous avons à faire est de modifier les paramètres des boutons comme suit :

Taille du texte du bouton : 30 px
Icône du bouton : voir capture d'écran (ce sera l'icône qui remplacera la police de l'icône utilisée pour le bouton)
Couleur de l'icône du bouton : #0c71c3 (cela doit correspondre à la couleur utilisée pour le texte du bouton)
Emplacement de l'icône du bouton : à gauche
Couleur du texte du survol du bouton : rgba (255,255,255,0) (ceci est complètement transparent afin de masquer la police de l'icône du bouton au survol)
Rembourrage personnalisé : 1 em à gauche, 1 em à droite (ce rembourrage remplacera le rembourrage par défaut du bouton et l'empêchera de se développer au survol)

Maintenant, tout ce que nous avons à faire est de remplacer la marge de l'élément before dans le css personnalisé. Allez dans l'onglet Avancé et entrez le CSS suivant dans la case avant :

margin-left: 0 !important;

Maintenant, votre icône de bouton sera remplacée par l'icône de survol au survol.

Création de boutons d'icône parfaitement circulaires qui s'adaptent à la taille du texte du bouton

Les conceptions de boutons circulaires fonctionnent très bien pour les boutons à icône unique. Et, si vous comprenez le fonctionnement interne de l'espacement du module de boutons, vous pouvez créer des boutons parfaitement circulaires qui évoluent en fonction de la taille du texte du bouton.

L'astuce consiste à espacer votre bouton en utilisant l'unité de longueur "em". Cette unité de longueur est relative à la taille du texte de votre bouton. Donc, si la taille du texte de votre bouton est de 30px, 1em est également de 30px (2em serait de 60px et ainsi de suite…). Sachant cela, nous devons juste nous assurer que notre rembourrage autour de notre bouton sera le même sur les 4 côtés. Mais ce que vous n'avez peut-être pas envisagé, c'est que la hauteur de la ligne du texte du bouton est de 1,7 em par défaut. Cela signifie que nous devons en tenir compte lors de l'ajout de nos valeurs de remplissage supérieure et inférieure.

Pour ceux d'entre vous qui veulent connaître les mathématiques derrière les valeurs de remplissage nécessaires pour créer des boutons circulaires, voici :

Pour les rembourrages Gauche et Droite, réglez-les tous les deux sur 1em. Cela signifie que la largeur totale de nos boutons sera de 90px (ou 3em) car…

30px de rembourrage gauche + 30px de police d'icône + 30px de rembourrage droit = ​​90px au total

La hauteur de la ligne de texte du bouton est de 1,7 em, ce qui équivaut à 170 % de la taille du texte du bouton (30 px) qui est égale à 51 px.

Pour le rembourrage supérieur et inférieur, réglez-les tous les deux sur 0,65 em. 0.65em est l'équivalent de 65% de la taille du texte du bouton (30px) qui équivaut à 19.5px.

Par conséquent…

19,5 px de rembourrage supérieur + 51 px de hauteur de ligne + 19,5 px de rembourrage inférieur = 90 px au total

Cela signifie que lorsque le texte du bouton est défini sur 30px, la taille totale du bouton sera de 90px par 90px (un carré parfait). En fait, vous pouvez penser de cette façon. Quelle que soit la taille du texte du bouton, la taille totale du bouton sera 3x cette valeur. Ainsi, un texte de bouton de 40 pixels créera un bouton de 120 pixels sur 120 pixels, et ainsi de suite.

À l'heure actuelle, le bouton a les bonnes dimensions, mais il est toujours carré. Tout ce que nous avons à faire est d'ajouter un rayon de bordure de 50% pour changer le bouton carré en un bouton cercle parfait.

Voici ce dont vous avez besoin pour transformer votre bouton en bouton rond :

Rayon de la bordure du bouton : 50 %
Rembourrage personnalisé : 0,65 em en haut, 0,65 em en bas, 1 em à droite, 1 em à gauche

N'oubliez pas, vous pouvez ajuster la taille du texte du bouton et le bouton restera parfaitement encerclé car le rembourrage s'adapte à la taille du texte.

Ajouter des boutons d'icônes à votre mise en page Divi

Divi facilite l'ajout et la personnalisation de boutons à icône unique pour s'adapter à la conception de toute mise en page prédéfinie.

Pour cet exemple, je vais vous montrer comment ajouter un bouton à icône unique à la mise en page de la page d'accueil Bed & Breakfast.

Pour ajouter la mise en page à votre page, ouvrez le menu des paramètres en cliquant sur l'icône violette en bas de la page (assurez-vous que le générateur visuel est activé). Cliquez ensuite sur l'icône Charger depuis la bibliothèque. Sélectionnez la mise en page de la page d'accueil Bed & Breakfast et cliquez sur le bouton « Utiliser cette mise en page » pour déployer la mise en page sur la page.

Ajouter un bouton d'icône à une image

Supposons que vous souhaitiez ajouter un petit bouton d'icône pour superposer le coin d'une image pour un CTA supplémentaire qui renvoie à un produit ou service particulier. Tout ce que vous avez à faire est d'ajouter un module de boutons sous l'image et de le personnaliser pour inclure la police de l'icône et le faire chevaucher l'image avec un espacement personnalisé.

Trouvez la section « À propos de nous » sur la mise en page de la page d'accueil. Ajoutez ensuite un module de boutons directement sous l'une des images utilisées pour présenter la « Chambre double » (c'est le premier dans la première colonne de la rangée de trois colonnes).

Ensuite, ouvrez les paramètres du bouton et mettez un "P" majuscule dans la zone de texte du bouton. Cela deviendra notre icône une fois que vous aurez sélectionné la police élégante comme police de bouton.

Pour commencer à faire correspondre le design du bouton avec la mise en page, enregistrez les paramètres de votre bouton et recherchez le bouton « Réserver maintenant » dans la section supérieure de la mise en page. Ouvrez les paramètres de bouton et copiez les styles de bouton en cliquant avec le bouton droit sur le titre de basculement des options de bouton et en sélectionnant l'option « Copier les styles de bouton » dans la liste.

Maintenant, faites un clic droit sur le module de boutons que vous avez ajouté sous l'image et sélectionnez "Coller les styles de boutons".

Mettez ensuite à jour les paramètres des boutons comme suit :

Police des boutons : police élégante
Largeur de la bordure du bouton : 0px
Afficher l'icône du bouton : NON

Ajoutons ensuite notre astucieux rembourrage personnalisé pour nous assurer que le bouton est un carré parfait :

Rembourrage personnalisé : 0.65em en haut, 0.65em en bas, 1em à gauche, 1em à droite

Pour positionner le bouton de manière à ce qu'il chevauche le coin inférieur droit de l'image, vous devrez d'abord vous débarrasser de la marge inférieure du module image ci-dessus. Ouvrez les paramètres du module d'image de l'image directement au-dessus du bouton et définissez la marge inférieure sur 0px.

Maintenant, nous devons tirer le bouton sur l'image en utilisant une valeur de marge négative personnalisée égale à la hauteur du bouton. Pour ce faire, nous devons déterminer la hauteur de notre bouton. Comme mentionné précédemment dans cet article, avec le rembourrage personnalisé en place, nous pouvons connaître la taille exacte de notre bouton en fonction de la taille actuelle du texte du bouton. Puisque la taille du texte du bouton est de 20px, nous savons que la hauteur de notre bouton est de 3em (3 fois la taille du texte du bouton), soit 60px. Par conséquent, nous devons définir une marge personnalisée pour notre bouton comme suit :

Marge personnalisée : -60px Haut

Et puis nous pouvons positionner notre bouton à droite en ajustant l'alignement du bouton à droite.

Maintenant que nous avons un design fonctionnel pour notre image et notre bouton. Tout ce que nous avons à faire est d'ajouter le même bouton à toutes les images de la section.

Étant donné que nous avons supprimé la marge inférieure de l'image, nous pouvons facilement appliquer cette modification à toutes les images de la section à l'aide de Extend Styles. Faites un clic droit sur l'image et sélectionnez "Étendre les styles d'image".

Dans la fenêtre contextuelle Étendre les styles, sélectionnez « Cette section » pour l'option Tout au long et cliquez sur le bouton Étendre. Maintenant, toutes les images ont une marge inférieure de 0px.

La dernière étape consiste simplement à copier et coller les modules Button sous chacune des images.

Voici la conception finale.

Et parce que nous avons utilisé des techniques d'espacement appropriées, le bouton restera en place sur mobile également…

Icônes disponibles à l'aide du module de boutons

Étant donné que le texte du bouton du module de boutons est limité aux caractères disponibles sur le clavier, vous devrez explorer ces touches pour trouver les icônes disponibles associées à chaque touche. Un moyen simple de le faire est de créer un module de boutons avec la police du bouton définie sur la police élégante et de saisir les caractères dans la zone de texte du bouton.

Voici une capture d'écran des personnages avec leur icône de police correspondante :

Si vous trouvez ce processus limitant, vous pouvez toujours utiliser un module de texte pour créer des liens d'icônes à l'aide des unicodes répertoriés ici.

Dernières pensées

L'utilisation de la police d'icône élégante avec le module de boutons de Divi est un moyen pratique de créer des boutons à icône unique pour votre site Web. Cela ouvre des portes pour faire preuve de créativité avec les paramètres du module pour personnaliser votre bouton avec des styles de texte uniques, des effets de survol, etc. J'aime particulièrement ces valeurs d'espacement des boutons personnalisées qui garantissent que les boutons prennent la forme d'un carré ou d'un cercle parfait.

Il y a des tonnes d'utilisations pour les boutons d'icônes. Espérons que l'exemple de cas d'utilisation que j'ai couvert ajoutera un peu d'inspiration pour vos propres projets.

Pour plus d'idées, découvrez comment utiliser la police d'icônes élégante ou comment intégrer une police d'icônes sur votre site Web.

J'aimerais ici quelques idées de votre part dans les commentaires ci-dessous.

À votre santé!