Tuto Webflow : Comment changer la couleur d'un icône au survol ?

Vous êtes-vous déjà demandé comment changer la couleur d'un icône lorsque la souris passe dessus sur votre site Webflow? Dans cet article, nous allons explorer étape par étape cette technique.

Introduction

Quand on survole certains icônes sur un site, il est courant de voir la couleur de l'icône changer. Par exemple, le fond peut passer en noir et l'icône en lui-même en blanc. Ceci améliore l'interactivité et l'engagement de l'utilisateur sur votre site.

Prérequis

• Les icônes doivent être sous le format SVG (et non des images). C'est un format vectoriel qui vous permettra de manipuler la couleur plus facilement.
• Si vous vous demandez comment ajouter ces SVGs, ne vous inquiétez pas! Il existe une librairie d'icônes spécialement conçue pour Webflow, créée par Rilium.

Étapes pour Changer la Couleur de l'Icône

1. Sélection de l'icône: Visitez le site Icone Relume, où vous pouvez chercher l'icône de votre choix, par exemple, Twitter. Vous pouvez facilement copier ces icônes pour Webflow.
2. Ajout de l'icône sur Webflow: Une fois que vous avez copié l'icône, collez-la directement dans votre projet Webflow.
3. Redimensionnement de l'icône: Changez sa classe pour l'ajuster à la taille que vous souhaitez.
4. Changement de couleur: Dans le panneau de style, utilisez les propriétés CSS pour modifier la couleur de l'icône en survol. Sélectionnez l'état 'hover' et modifiez les paramètres de couleur comme désiré. Vous pouvez également ajouter une transition pour rendre le changement de couleur plus fluide.

Conseil

La couleur est prise en compte grâce à la mention "fil = current color" dans le code SVG. Ainsi, il adoptera la couleur que vous définissez dans Webflow.

Conclusion

Voilà! Vous avez réussi à changer la couleur d'un icône sur Webflow. C'est une technique simple, mais qui peut grandement améliorer l'apparence et la convivialité de votre site.

Si vous avez trouvé cette information utile et souhaitez en apprendre davantage sur Webflow, considérez de vous inscrire à CORIACE 💪. C'est une plateforme de formation complète sur Webflow. Que vous soyez débutant ou avancé, il y a des ressources pour tout le monde.

N'oubliez pas de vous abonner pour rester informé des prochaines vidéos et articles. À bientôt!