Aides

Lien avec icône

La classe .icon-link aligne une icône et un texte dans un lien, avec un espacement régulier. La variante .icon-link-hover fait glisser l’icône au survol et au focus clavier.

L’icône est un élément <svg> de classe .bi, placé comme enfant direct du lien. Il prend la taille de la police (1em), hérite de la couleur du texte et ne rétrécit pas. L’espacement entre l’icône et le texte vient de gap.

Lien avec icône#

Une icône en SVG décorative : aria-hidden="true" la masque aux lecteurs d’écran, le texte du lien suffit.

Consulter mes comptes

<a class="icon-link" href="#">
  <svg class="bi" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"/></svg>
  Consulter mes comptes
</a>

Glissement au survol#

Ajoutez .icon-link-hover : la flèche se déplace vers la droite au survol et au focus clavier.

Demander un prêt immobilier

<a class="icon-link icon-link-hover" href="#">
  Demander un prêt immobilier
  <svg class="bi" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"/></svg>
</a>

Couleur, décalage et mouvement#

Associez les liens colorés pour la couleur, et réglez --bs-icon-link-transform pour changer le mouvement.

Épargner ce mois-ci Lire les conditions de la carte

<div class="vstack gap-2">
  <a class="icon-link icon-link-hover link-success" href="#" style="--bs-icon-link-transform: translate3d(0, -.125rem, 0);">
    <svg class="bi" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M8 1l7 7h-4v7H5V8H1z"/></svg>
    Épargner ce mois-ci
  </a>
  <a class="icon-link icon-link-hover link-primary link-offset-3" href="#" style="--bs-icon-link-transform: translate3d(.5rem, 0, 0);">
    Lire les conditions de la carte
    <svg class="bi" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"/></svg>
  </a>
</div>

Lien-bouton avec icône#

.icon-link fonctionne aussi dans une liste de liens d’agence.

<ul class="list-unstyled vstack gap-2 mb-0">
  <li><a class="icon-link" href="#"><svg class="bi" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M8 0a5 5 0 0 0-5 5c0 3.5 5 11 5 11s5-7.5 5-11a5 5 0 0 0-5-5m0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4"/></svg>Trouver une agence</a></li>
  <li><a class="icon-link" href="#"><svg class="bi" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M3 2h10v12H3z"/></svg>Télécharger le contrat</a></li>
</ul>

Classes et variables

Classes et variables
Élément	Valeur par défaut	Rôle
`.icon-link`	—	Lien en `inline-flex`, aligné au centre, avec écart et soulignement décalé.
`.icon-link-hover`	—	Déplace l’icône `.bi` au survol et au `:focus-visible`.
`.icon-link > .bi`	`1em` × `1em`	Icône : taille de la police, couleur du texte (`fill: currentcolor`), ne rétrécit pas.
`--bs-icon-link-transform`	`translate3d(.25em, 0, 0)`	Mouvement de l’icône avec `.icon-link-hover`.
`$icon-link-gap`	`.375rem`	Espace entre l’icône et le texte.
`$icon-link-underline-offset`	`.25em`	Décalage du trait de soulignement.
`$icon-link-icon-size`	`1em`	Taille de l’icône.
`$icon-link-icon-transition`	`.2s ease-in-out transform`	Transition du mouvement (désactivée si l’utilisateur réduit les animations).
`$icon-link-icon-transform`	`translate3d(.25em, 0, 0)`	Valeur par défaut du mouvement.

Bonnes pratiques

À faire

Mettez aria-hidden="true" sur une icône purement décorative.
Gardez le texte du lien explicite : il doit se comprendre seul (« Demander un prêt », pas « Cliquer ici »).

À éviter

Ne comptez pas sur l’icône seule pour dire où mène le lien.
Ne faites pas de la translation de l’icône le seul retour visuel : le soulignement et la couleur doivent aussi réagir.

Accessibilité

Si l’icône porte seule le sens du lien, donnez-lui un role="img" et un aria-label, ou ajoutez un texte visuellement masqué.
Le mouvement s’applique aussi au focus clavier (:focus-visible) : l’information n’est pas réservée à la souris.