Dans la plupart des cas, les icônes de boutons héritent automatiquement des styles par défaut. Toutefois, si vous utilisez des arrière-plans de boutons personnalisés, des couleurs de marque ou des mises en page sombres, vous devrez peut-être définir manuellement la couleur de l'icône pour garantir une visibilité optimale et un style cohérent.
Le Élément bouton GemPages prend en charge deux types de mise en page, selon la configuration du bouton :
- Bouton sans icône : affiche uniquement le texte du bouton
- Bouton avec icône : affiche une icône à côté du texte du bouton
Si vous utilisez un Bouton avec icône Pour la mise en page, vous pouvez personnaliser l'apparence des icônes à l'aide de CSS personnalisé. Ce guide vous apprendra comment faire. changer la couleur de l'icône lors de l'utilisation d'un bouton comportant une icône.
Pourquoi la couleur des icônes est importante dans la conception des boutons
Les icônes à l'intérieur des boutons aident les utilisateurs à comprendre rapidement l'objectif d'une action.
Cependant, la couleur par défaut des icônes ne correspond pas toujours à vos besoins de conception. Dans de nombreux projets concrets, les commerçants souhaitent que leurs icônes de boutons :
- Couleurs assorties à la marque
- Restez visible sur les fonds sombres ou dégradés
- Aligner avec la couleur du texte du bouton
- Maintenir un style cohérent dans plusieurs sections
Si la couleur de l'icône ne contraste pas suffisamment avec l'arrière-plan, elle peut devenir difficile à voir, ce qui réduit l'efficacité du bouton.
Comment modifier la couleur de l'icône d'un élément de bouton
Suivez les étapes ci-dessous pour appliquer une couleur d'icône personnalisée à votre bouton.
Étape 1 : Ouvrir le code personnalisé du bouton
- Ouvrez votre page dans l'éditeur.
- Localisez le Élément bouton qui contient l'icône.
- Cliquez avec le bouton droit sur l'élément Bouton.
- Sélectionner Code personnalisé.
Le panneau « Code personnalisé » s'ouvrira.
Étape 2 : Ajouter le code CSS
À l'intérieur de l' CSS Dans l'onglet, ajoutez le code suivant :
| bouton.elementID svg{
couleur: #ffffff; } |
Remplacer:
ID d'élément avec la classe indiquée en haut.
# Ffffff avec votre code couleur préféré.
Si vous ne connaissez pas le code couleur HEX que vous souhaitez utiliser, vous pouvez en générer un à l'aide d'un outil de sélection de couleurs en ligne. Voici quelques sites web utiles :
- Outil de sélection de couleurs en lignePermet de choisir des couleurs à l'aide d'une roue chromatique et de copier instantanément les valeurs HEX, RGB ou HSL.
- Outil de sélection des couleurs d'imagePermet de télécharger une image et de cliquer sur n'importe quelle zone pour extraire son code couleur HEX exact.
Étape 3 : Enregistrer et publier
Après avoir ajouté le code, cliquez Enregistrer. TLa couleur de l'icône sera mise à jour immédiatement.
Conseils pour choisir des couleurs d'icônes efficaces
Considérez ce qui suit:
1. Maintenir un contraste élevé
Les icônes doivent être faciles à voir.
Bon exemple de contraste :
- Bouton foncé + icône blanche
- Bouton clair + icône sombre
Exemple de faible contraste :
- Bouton sombre + icône sombre
- Bouton lumineux + icône lumineuse
2. Restez fidèle à votre palette de couleurs de marque
Utilisez les couleurs officielles de la marque autant que possible.
Évitez les couleurs aléatoires qui rompent l'harmonie visuelle.
3. Test sur tous les appareils
Vérifier la visibilité de l'icône sur :
- Bureau
- Tablettes
- Mobile
Certaines couleurs apparaissent différemment sur les petits écrans.
Si vous devez également redimensionner les icônes, vous pouvez suivre le guide sur Comment modifier la taille de l'icône d'un élément Button à l'aide de code personnalisé ? pour ajuster les dimensions des icônes avant d'appliquer la personnalisation des couleurs.
Merci pour vos commentaires