Icône Modèles CSS

Modèles CSS d'icônes fonctionnels stylisés pour cartes et commandes cliquables

Chaque icône implique des choix précis : sa taille, la forme qui se trouve derrière elle et ce qui se produit au survol du pointeur. Les modèles CSS d'icônes intègrent déjà ces choix. Les blocs vont des cartes de services et lignes de contact jusqu'aux boutons avec icônes. Des classes partagées stylisent uniformément chaque élément d'un groupe, de sorte qu'une nouvelle carte adopte automatiquement la même taille et la même couleur.

Règles intégrées aux cartes typiques

Les blocs de cette catégorie comportent généralement des règles telles que :

1. une largeur et une hauteur identiques pour chaque icône du groupe, afin qu'aucune ne paraisse involontairement plus grande ;
2. un cercle plein ou avec bordure derrière le symbole, ou un carré aux coins arrondis ;
3. un espacement fixe entre l'icône et son titre qui maintient l'alignement des rangées lors des retours à la ligne ;
4. une couleur d'accent liée à la palette du thème, pour que tout l'ensemble s'ajuste simultanément.

Ces règles s'appliquent aussi bien aux icônes SVG qu'aux glyphes de polices d'icônes. Dans une rangée de contact, toutes les icônes de canaux partagent la même taille. La ligne d'e-mail peut néanmoins recevoir un accent plus vif s'il s'agit de votre canal principal. L'épaisseur du trait compte également, car les icônes aux contours fins s'estompent sur les écrans de téléphone bien avant les icônes pleines.

Cellules répétées et états cliquables

Dans Nicepage, le composant Grid Repeater Element répète la disposition et le style de ses cellules. Chaque colonne conserve son propre texte et sa propre icône. Modifiez la couleur du cercle dans une cellule, et toutes les autres suivent. Une grille de services statique n'a rarement besoin de plus. Les icônes cliquables pour la recherche, le partage ou la fermeture d'un panneau diffèrent, et le modèle doit définir ces états :

1. un aspect par défaut discret à côté du texte environnant ;
2. un état de survol qui modifie la couleur ou l'arrière-plan au passage du curseur ;
3. un état actif ou de focus pour le clic lui-même et pour la navigation au clavier ;
4. un état mis en évidence qui signale le choix actuel, comme un filtre sélectionné.

Recolorer des groupes entiers en une seule fois

Grâce aux couleurs du thème dans les paramètres de site de Nicepage, changer un accent met à jour chaque icône qui l'utilise à travers les pages du projet. Il vaut mieux laisser les symboles d'avertissement et de confirmation en dehors de cet accent, en les accordant en taille avec leurs voisins tout en utilisant leur propre couleur. Les dimensions peuvent également s'adapter selon le mode responsive, réduisant un grand symbole décoratif sur smartphone. Lorsque les commandes visuelles ne suffisent pas, Custom CSS Code permet d'ajouter une règle à un seul élément, à une page spécifique ou à l'ensemble du site.

Un modèle de grille de services peut se contenter d'un style d'icône statique unique. Pour les boutons et interrupteurs, vérifiez les états avant la palette, car une commande qui ne montre aucun changement au clic semble défectueuse.