Le bloc Icône pose une icône vectorielle, fixe, animée ou tirée de vos propres fichiers SVG. Cette page décrit le sélecteur, le mouvement des icônes animées, le texte alternatif et les réglages de taille et de trait.
Ajouter une icône
- Dans l’éditeur, ouvrez l’inserteur et choisissez Icône. Ajouter un bloc détaille les façons d’insérer un bloc.
- Ouvrez l’onglet Styles. Le panneau Icône se trouve sous la rangée des états.
- Choisissez une source, cherchez l’icône dans le champ Chercher une icône… ou parcourez les catégories, puis cliquez sur l’icône. Elle s’affiche sous Icône choisie.
- Dans l’onglet Réglages, remplissez le Texte alternatif si l’icône porte une information.
| Source | Contenu |
|---|---|
| Icônes | La bibliothèque livrée avec le produit, plus de 1 700 icônes fixes, cherchées par nom, mot-clé ou catégorie. Sans recherche, le sélecteur montre les icônes Récemment utilisées et Parcourir par catégorie. |
| Animées | Plus de 450 icônes dont le mouvement est dans le dessin : une flèche qui glisse ou une cloche qui sonne. Mêmes catégories et mêmes mots-clés que les icônes fixes. |
| Personnalisées | Vos propres fichiers SVG. Gérer les icônes personnalisées… ouvre la fenêtre où Envoyer un SVG, chercher et supprimer vos fichiers. |
Les vignettes de la grille jouent au survol : le mouvement que vous voyez en passant le pointeur est celui que verra le visiteur.
Régler le mouvement d’une icône animée
Sans réglage, une icône animée bouge quand le visiteur pose son pointeur dessus. Dès qu’elle est choisie, deux réglages apparaissent sous elle.
| Réglage | Effet | Valeur par défaut |
|---|---|---|
| Déclencheur | Quand il est visible, à l’arrivée à l’écran. Au survol. Au clic sur le bloc. Quand il est activé, par un onglet ouvert, une diapositive affichée ou un autre bloc. | Au survol |
| Comportement | Jouer une fois, puis l’icône reste où le geste l’a laissée. Rejouer à chaque déclenchement. Infinie, en boucle. | Rejouer |
Ces deux réglages sont ceux de l’onglet Animations, où le geste apparaît comme une animation de la liste. Vous y réglez en plus sa durée, sa courbe, son délai et son enchaînement avec d’autres animations. Animer un bloc les décrit.
Un message s’affiche au moment utile dans trois cas :
- une icône animée posée sur l’état Survol au lieu de l’état Par défaut ;
- un geste qui suit une autre animation et n’a plus de déclencheur propre ;
- un geste d’un seul tenant, pour lequel Rejouer et Infinie donnent le même résultat.
Onglet Réglages
| Réglage | Effet | Valeur par défaut |
|---|---|---|
| Texte alternatif | Le nom que les lecteurs d’écran annoncent à la place du dessin. Vide, l’icône est décorative et les lecteurs d’écran la passent. | Vide |
| Rotation | Fait tourner l’icône. | Aucune |
Une fois l’icône choisie, un message sous le champ rappelle que ce texte n’est pas écrit dans la page comme un texte visible. Le dessin prend toute la place du bloc. Le texte reste le nom annoncé par les lecteurs d’écran.
Onglet Styles
L’icône se règle dans les états Par défaut, Survol et Actif. L’icône elle-même se choisit par état. Le style Icône, porté dès l’insertion, la met à 24 pixels.
| Panneau | Usage |
|---|---|
| Couleurs | La couleur du dessin et du fond, voir Colorer un bloc. |
| Typographie | La taille, sans police ni graisse. |
| Taille et espacement | Une largeur ou une hauteur est celle du dessin. L’autre côté suit ses proportions. Épaisseur de trait affine ou épaissit les contours d’une icône à traits : 2 est le trait des icônes du produit. Voir Régler la taille, les bordures et les effets. |
| Bordures, Effets, Transitions | Régler la taille, les bordures et les effets |
Le bloc a la hauteur de son dessin : un espacement intérieur égal sur les quatre côtés dessine une pastille régulière. La partie Icônes du catalogue de design donne une allure à toutes les icônes du site : Nu, Trait fin, Pastille, Carré plein ou Contour (Adopter un design du catalogue).
Onglet Animations
L’onglet Animations porte le geste d’une icône animée et toute autre animation. L’effet Tracer y dessine les traits d’une icône fixe, du début à la fin. Animer un bloc décrit les effets.
Accessibilité
- Remplissez le Texte alternatif d’une icône seule dans un lien, ou d’un pictogramme qui remplace un mot. Laissez-le vide pour une icône décorative.
- Un visiteur qui a demandé à réduire les animations voit les icônes animées immobiles.
- Infinie met un mouvement permanent dans la page. Réservez-le à un élément isolé.
Limites
- Seules les icônes de la source Animées ont un geste : une icône fixe ne devient pas animée.
- Vos fichiers SVG restent dans Personnalisées, qu’ils bougent ou non.