Il n’existe pas d’icône standard établie.

Par exemple, l’icône que vous avez choisie est similaire à celle utilisée dans wikipedia pour marquer les liens pointant vers des sites Web externes (n’appartenant pas à Wikipédia). Vous pouvez cependant l’utiliser sur vos sites Web et établir ainsi une convention dans vos propres pages. Assurez-vous simplement de le faire de manière cohérente: TOUS les liens marqués de cette icône DOIVENT ouvrir sur une nouvelle page, et TOUS les liens qui n’en sont pas marqués devraient s’ouvrir dans la même page. Vous pouvez améliorer l’accessibilité, à condition que vous ayez une base d’utilisateurs stable, qui aura la possibilité de vous familiariser avec vos conventions. Si votre site est visité principalement par des visiteurs ponctuels, alors vous appendiez simplement du fouillis visuel.

Pour de nombreux caractères Unicode, vous devez utiliser la police suivante (au moins pour Windows, veuillez commenter pour Linux et Mac si vous pouvez tester):

a:link {font-family: 'Segoe UI Symbol' !important;} 

Vous pouvez également appliquer des sélecteurs CSS pour utiliser l’atsortingbut target de la manière suivante:

 a[target='blank'] a[target] 

Gardez à l’esprit que les navigateurs sont amusants sur le comportement du sélecteur et a:link

Caractère Unicode ‘ Two Joined Squares ‘:

⧉

http://www.fileformat.info/info/unicode/char/29c9/index.htm

CSS

 a[target='_blank']::after {content: '\29C9';} 

Soutien

Mac OS X, Yosemite: 2 fonts, Apple Symbol et STIXGeneral

Caractère Unicode « Carré blanc avec quadrant supérieur droit »:

◳

http://www.fileformat.info/info/unicode/char/25F3/index.htm

CSS

 a[target='_blank']::after {content: '\25F3';} 

Soutien

Mac OS X, Yosemite: 3 fonts, Apple Symbol , STIXGeneral , Menlo .

Caractère Unicode « Carré blanc de la limite supérieure droite »:

❐

http://www.fileformat.info/info/unicode/char/2750/index.htm

CSS

 a[target='_blank']::after {content: '\2750';} 

Soutien

Mac OS X 10.10 Yosemite possède trois fonts: Arial Unicode MS , Menlo et Zapf Dingbats .

J’irais avec quelque chose comme ça:

L’icône que vous avez choisie, comme d’autres l’ont mentionné, est largement utilisée par wikipedia et d’autres sites pour représenter des liens vers des sites externes. Mais il s’agit plutôt d’une préférence personnelle et non d’une norme Web.

Il y a aussi U+1F5D7 OVERLAP : in, ajouté dans Unicode 7.0 (juin 2014).

Son commentaire est “fenêtres décalées superposées”.

Entité HTML: 🗗

( fileformat.info )

Le plus proche que je pouvais trouver était NORTH WEST ARROW À CORNER ⇱ et SUD-EST ARROW À CORNER ⇲ – mais qui a créé ces icons n’a pas fait NORTH EAST ARROW CORNER

http://www.fileformat.info/info/unicode/category/So/list.htm

J’aime ce symbole Unicode pour Open-in-new-window

↗️ ou ↗

North East Arrow Assurez-vous que vous utilisez utf-8 html.

Html est ↗

Essayez | ͟↗̱ |:

 |͟↗̱| 

Et pour la compatibilité avec Arial

 ∣͟↗̱∣ 

Sur mon blog WordPress, j’ai dû créer un lien vers plusieurs sites qui désactivent apparemment le bouton Retour (résultats Facebook et Google Translate). Pour ces liens, je les configure pour ouvrir une nouvelle fenêtre. J’ai rassemblé de petites icons de “nouvelle fenêtre” mais elles interrompent toujours l’interligne (c’est peut-être une chose WordPress; il n’y a pas d’espace supplémentaire autour des icons) donc j’ai décidé d’utiliser un titre = “” “et une icône de texte [+] dans le lien, à la fin du texte du lien, séparées par un espace.

Trois symboles utiles: ❐⍈⎘

 ❐ ❐ ❐  U+2750 UPPER RIGHT DROP-SHADOWED WHITE SQUARE ⍈ ⍈ ⍈  U+2348 APL FUNCTIONAL SYMBOL QUAD RIGHTWARDS ARROW ⎘ ⎘ ⎘  U+2398 NEXT PAGE 

Que diriez-vous de quelque chose comme l’image jointe (que n’importe qui est libre d’utiliser ou d’éditer)?

1 :

Je pense à l’append à la droite des boutons uniques existants pour qu’ils deviennent un groupe de boutons horizontal permettant aux utilisateurs de cliquer sur le lien et de l’ouvrir dans une nouvelle fenêtre.

Je sais que je suis en retard à la fête, mais FWIW voici ma solution ¯ \ _ (ツ) _ / ¯,

HTML:

Your link

jQuery:

Si vous connaissez une version JS de cette version, faites-le nous savoir, je serais ravi de l’append ici (je ne suis pas développeur JS)

$("a[target='_blank']").attr({title:"Link opens in a new tab"}).addClass("new-tab");

CSS:

 .new-tab:after { display: inline-block; content: "⇱"; position: relative; top: -5px; margin-left: 2px; transform: rotate(90deg); } 

Démo:

Voici un stylo: https://codepen.io/anon/pen/MBBXjP (ce lien, par exemple, DEVRAIT s’ouvrir dans une nouvelle fenêtre, lol).

Pendant des années, cette technique m’a été très utile car:

• Je n’ai pas besoin d’append manuellement un atsortingbut de title chaque fois que je crée un lien qui s’ouvre dans un nouvel onglet.
• Je n’ai pas besoin d’append la nouvelle icône de fenêtre.
• Le JavaScript et le CSS font le gros du travail, il me suffit d’append target="_blank" et c’est tout.
• Si je n’ai pas access au code HTML mais que je souhaite toujours améliorer l’accessibilité d’un site Web ou d’une application Web, je peux le faire avec cette méthode.
• Cette méthode convient parfaitement aux éléments en ligne et au niveau des blocs.

J’aurais aimé pouvoir utiliser cette icône 🗗 , le problème est que ce n’est pas supporté sur les appareils iOS et je pense que MacOS non plus.

Je viens en retard à cette fête, mais regarde ce que j’ai trouvé à CodePen !

 a[target="_blank"]:after { content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==); margin: 0 3px 0 5px; }