Comment modifier la taille de l'icône d'un bouton à l'aide d'un code personnalisé

Dans certaines mises en page, vous souhaiterez peut-être ajuster la taille de l'icône pour mieux l'harmoniser avec le texte du bouton ou le design général. Actuellement, il n'est pas possible de modifier directement la taille de l'icône à l'intérieur d'un élément Button via les options de style intégrées. Pour personnaliser la taille de l'icône, vous pouvez utiliser un court extrait de code CSS dans les paramètres de l'élément.

Ce guide vous accompagne à chaque étape pour appliquer correctement la modification.

À propos des mises en page de boutons avec icônes

Le Élément bouton GemPages prend en charge différentes mises en page selon votre configuration.

Il existe deux configurations de boutons courantes :

• Bouton sans icône : cette mise en page contient uniquement du texte et ne comprend aucune icône.
• Bouton avec icône : cette mise en page inclut une icône placée avant le texte du boutonLes icônes permettent de rendre les boutons plus attrayants visuellement et plus faciles à reconnaître.

Comment modifier la taille de l'icône d'un bouton à l'aide d'un code personnalisé

Suivez les étapes ci-dessous pour ajuster la taille de l'icône à l'intérieur de votre élément Button.

Étape 1 : Sélectionnez l’élément bouton contenant l’icône

Message de l'éditeur de GemPages :

• Ouvrez la page ou le modèle où se trouve votre élément Bouton.
• Cliquez directement sur le Élément bouton qui contient l'icône.
• Vérifiez que le bouton sélectionné comporte une icône placée avant le texte.

Une fois sélectionné, le panneau des paramètres de l'élément apparaîtra sur le côté gauche de l'éditeur.

Veuillez vous assurer que vous modifiez le bon bouton avant de continuer.

Étape 2 : Ouvrez l’éditeur de code personnalisé

Après avoir localisé l'élément Button :

• Faites un clic droit sur l'élément Bouton qui contient l'icône.
• Dans le menu déroulant, sélectionnez Code personnalisé.

Cette action ouvre l'éditeur de code personnalisé, où vous pouvez ajouter du CSS qui s'applique uniquement à cet élément spécifique.

Cette section vous permet d'appliquer un style supplémentaire à l'élément sélectionné.

Étape 3 : Ajouter du code CSS pour modifier la taille de l’icône

À l'intérieur de l' CSS personnalisé Dans ce champ, collez le code suivant :

Ce code contrôle la taille de l'icône à l'intérieur du bouton sélectionné.

Remplacer:

• .ElementClass avec la classe indiquée en haut.
• 50px à la taille que vous souhaitez.

Après avoir saisi le code, cliquez Enregistrer.

La taille de l'icône sera mise à jour en fonction de la valeur que vous avez saisie :

Étape 4 : prévisualisez le résultat

Après la publication :

• Prévisualisez votre page.
• Vérifiez si la taille de l'icône est équilibrée par rapport au texte du bouton.
• Tester la mise en page sur ordinateur et sur mobile.

Si nécessaire, retournez dans l'éditeur et ajustez à nouveau la valeur de la taille.

Vous pouvez répéter l'opération jusqu'à ce que la taille de l'icône corresponde à votre design.

Comment choisir la bonne taille d'icône

La taille correcte de l'icône dépend de la taille de votre bouton et du style de texte.

Vous trouverez ci-dessous les plages de tailles couramment utilisées :

Utilisez ces plages de valeurs comme points de départ, puis ajustez-les en fonction de votre configuration.