Dans un site Web, il est d'usage d'ajouter un icône à côté des liens qui mènent vers un site Web différent. On parlera d'identifier les liens externes.
Il s'agit d'ailleurs d'une des bonnes pratiques décrites par l'OPQUAST pour « améliorer vos sites et mieux prendre en compte vos utilisateurs » : https://checklists.opquast.com/fr/qualiteweb/les-liens-internes-et-externes-sont-differencies.
L'icône le plus reconnu sur le Web pour identifier les liens externes est un rectangle dans lequel une flèche pointe vers le coin supérieur droit.
Vous pouvez utiliser l'image de Wikimedia commons (
) disponible ici : http://commons.wikimedia.org/wiki/File:External.svg.
FontAwesome offre également un icône à cet effet (code f35d 
) documenté ici : https://fontawesome.com/icons/external-link-alt.
Pour ma part, j'utilise un icône tiré d'une banque d'icônes pour sites Web achetée chez Big Stock.
Si vous désirez mettre en place une telle fonctionnalité sur votre site Web, rien de plus facile. Une petite règle CSS fera l'affaire.
Voici la précieuse règle CSS pour travailler avec un icône placé dans le dossier images :
a:not([href*='mondomaine.com']):not([href^='#']):not([href^='/']) {
background: url('/images/LienExterne.svg') center right no-repeat;
background-size: 10px;
padding: 5px 14px 0 0;
}
Cette règle stipule que :
Si vous préférez travailler avec FontAwesome :
a:not([href*='mondomaine.com']):not([href^='#']):not([href^='/']):after {
font-family: 'FontAwesome';
content: " \f35d";
}
« Adding External Link Indicator with CSS ». Waaz. https://waaz.xyz/adding-external-link-indicator-with-css/
▼Publicité
