新窗口图标（用于Web辅助功能）

Question

是否有默认，标准，推荐或众所周知的图标表示链接会打开新的浏览器窗口？

这是出于网络辅助功能的原因。或者它基本上是免费的吗？

我意识到那些能够最大限度地利用它们的人（使用屏幕阅读器）甚至不关心图像的样子，并且对替代文字更感兴趣。

决定选择这个：

除非有人能提出更广泛采用的建议吗？

Answer 1

对于许多Unicode字符，您需要使用以下字体（至少对于Windows，如果您能够测试，请评论Linux和Mac）：

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

您也可以应用CSS选择器来使用target属性：

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

请注意，浏览器对a选择器和a:link / a:visited的行为很有趣，所以请务必考虑到这一点。

Unicode＆＃39; 两个已加入的方块＆＃39;字符：

⧉

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

<强> CSS

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

<强>支持

Mac OS X，Yosemite：2种字体，Apple Symbol和STIXGeneral

Unicode＆＃39; 带有右上象限的白方＆＃39;字符：

◳

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

<强> CSS

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

<强>支持

Mac OS X，Yosemite：3种字体，Apple Symbol，STIXGeneral，Menlo。

Unicode＆＃39; 右上角阴影白方＆＃39;字符：

❐

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

<强> CSS

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

<强>支持

Mac OS X 10.10 Yosemite有三种字体：Arial Unicode MS，Menlo和Zapf Dingbats。

Answer 2

我会选择这样的事情：

您所选择的图标，正如其他人所提到的，被维基百科和其他网站广泛用于表示外部网站的链接。但这更多是个人偏好而非网络标准。

Answer 3

我来晚了，但是look what I have found at CodePen！

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

<a class="external" href="https://example.org" target="_blank">external link</a>

Answer 4

我喜欢Open-in-new-window

的这个unicode符号

↗️ 要么 ↗

North East Arrow确保您使用的是utf-8 html。

Html是↗

Answer 5

还有U+1F5D7 OVERLAP :,在Unicode 7.0（2014年6月）中添加。

其评论是“重叠偏移窗口”。

HTML实体：🗗

（fileformat.info）

Answer 6

我能找到的最近的是西北角到角落⇱和东南角到角落⇲ - 但是谁创造了这些图标并没有做到东向箭头

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

Answer 7

没有既定的标准图标。

例如，您选择的图标类似于维基百科中用于标记指向外部网站（不属于维基百科）的链接的图标。但是，您可以在您的网站上使用它，从而在您自己的页面中建立约定。只需确保一致地执行此操作：标有该图标的所有链接必须打开一个新页面，并且所有未标记该链接的链接应在同一页面中打开。只要您拥有稳定的用户群，谁就有机会习惯您的约定，您可以改善可访问性。如果您的网站主要是由一次性访问者访问，那么您只是添加视觉混乱。

Answer 8

尝试|͟↗|：

|͟↗̱|

与Arial的兼容性

∣͟↗̱∣

Answer 9

三个有用的符号：❐⍈⎘

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

Answer 10

好吧，我参加聚会迟到了，但这是我对所有其他人的回答提出的改进意见：

<链接模型>

我在这里找到了非常简洁的图标：https://icons8.com/icon/43738/external-link
在此处缩小/优化了 SVG：https://petercollingridge.appspot.com/svg-optimiser
并将生成的 SVG 的 base64 嵌入到 CSS 样式规则中，指定 ems:

中的所有大小

a[target="_blank"]::after {
  content: "";
  width: 1em;
  height: 1em;
  margin: 0 0.05em 0 0.1em;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48cGF0aCBkPSJNOSAyTDkgMyAxMi4zIDMgNiA5LjMgNi43IDEwIDEzIDMuNyAxMyA3IDE0IDcgMTQgMlpNNCA0QzIuOSA0IDIgNC45IDIgNkwyIDEyQzIgMTMuMSAyLjkgMTQgNCAxNEwxMCAxNEMxMS4xIDE0IDEyIDEzLjEgMTIgMTJMMTIgNyAxMSA4IDExIDEyQzExIDEyLjYgMTAuNiAxMyAxMCAxM0w0IDEzQzMuNCAxMyAzIDEyLjYgMyAxMkwzIDZDMyA1LjQgMy40IDUgNCA1TDggNSA5IDRaIi8+PC9zdmc+) no-repeat;
  background-size: contain;
  display: inline-block;
  vertical-align: text-bottom;
}

An <a href="" target="_blank">external link</a> is super pretty! ?<br />
<span style="font-size: 2em;">In <a href="" target="_blank">all</a> sizes!</span><br />
<span style="font-size: 3em;">Even <a href="" target="_blank">super large</a> ones!</span><br />
<span style="font-size: 0.5em;">And in <a href="" target="_blank">super tiny ones</a> too!</span><br />

它对我来说非常棒！
我可能永远不会回到可能存在的任何解决方案。

Answer 11

在我的WordPress博客上，我不得不链接到几个显然禁用后退按钮的网站（Facebook和谷歌翻译结果）。对于这些链接，我将它们设置为打开一个新窗口。我收集了一些小的“新窗口”图标，但它们总是打断行间距（也许它是一个WordPress的东西;图标周围没有额外的空间）所以我决定使用标题=“”表示“链接打开新窗口“和链接中的文本图标[+]，在链接文本的末尾，用空格分隔。

Answer 12

我知道我要参加聚会晚了，但是FWIW这是我的解决方法\\ _（ツ）_ /¯，

HTML：

<a href="#" target="_blank">Your link</a>

jQuery：

如果您知道该版本的原始JS版本，请告诉我们，我很乐意在此处添加它（我不是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);
}

演示：

这是一支钢笔：https://codepen.io/anon/pen/MBBXjP（例如，此链接应在新窗口中打开，哈哈）。

---

多年来，这种技术对我非常有用，因为：

• 每次创建在新标签中打开的链接时，我不必手动添加title属性。
• 我不必添加新的窗口图标。
• JavaScript和CSS繁重，我需要做的就是添加target="_blank"，就是这样。
• 如果我没有访问HTML的权限，但仍然需要/想要增强网站/ webapp的可访问性，则可以使用此方法。
• 此方法对于内联和块级元素都适用。

我很希望能够使用此图标，问题是iOS设备不支持该图标，我认为macOS也是如此。

Answer 13

没有看到以下选项。
它是 css ，最终像这样：

参见此处：https://codepen.io/Bets/pen/KGBqqb（下面的运行代码片段显示不正确）

.newWindow {
  position: relative;
  border: 1px solid;
  width: 8px;
  height: 8px;
}

.newWindow:after {
  position: absolute;
  top:-8px;
  right:-2px;
  font-size:0.8em;
  content:"\1f855";
}

.newWindow:before {
  position: absolute;
  top: -3px;
  right: -3px;
  content: " ";
  border: 4px solid white;
}

<div class="newWindow"></div>

Answer 14

如今，您可以使用cheatsheet - solid icons中的Font Awesome 5中的图标：

哪个接近所选图标。

查看 solid.css ，我注意到字体的名称是“ Font Awesome 5 Free”：

a[target='_blank']::after {
    content: ' \f35d';
    font-family: "Font Awesome 5 Free";
    color: blue;
}

或者如果您不使用Font Awesome CSS，而只想定位字体：

@font-face {
    font-family: "FontAwesomeSolid";
    font-weight: bold;
    font-style: normal;
    src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/webfonts/fa-solid-900.ttf") format("truetype");
}

a[target='_blank']::after {
    content: ' \f35d';
    font-family: "FontAwesomeSolid";
    color: blue;
}

Answer 15

附件图片（任何人可以免费使用或编辑）的内容如何？

1：

我正在考虑将其添加到现有单个按钮的右侧，以便它们成为一个水平按钮组，用户可以选择单击该链接并在新窗口中打开它。