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

Question 1

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

这是出于Web可访问性的原因。还是基本上所有人都免费？

我意识到，那些能够充分利用它们的用户（使用屏幕阅读器）甚至不会在乎图像的外观，而对替代文本更感兴趣。

决定去这个：！[新窗口图标] [1]。

除非有人可以提出一个被更广泛采用的建议？

Question 2

没有已经建立的标准图标。

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

Question 3

我参加这个聚会很晚，但是看看我在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>

展开摘要

Question 4

对于许多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“两个连接的正方形”字符：

⧉

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

的CSS

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

支持

Mac OS X，优胜美地：2种字体Apple Symbol和STIXGeneral

Unicode“带有右上象限的白方块”字符：

◳

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

的CSS

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

支持

Mac OS X中，优胜美地：3种字体Apple Symbol，STIXGeneral，Menlo。

Unicode“右上阴影白色方形”字符：

❐

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

的CSS

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

支持

Mac OS X的10.10约塞米蒂有三种字体：Arial Unicode MS，Menlo和Zapf Dingbats。

Question 5

我喜欢这个在新窗口中打开的unicode符号

↗️或↗

东北箭头确保您使用的是utf-8 html。

HTML是 ↗

Question 6

我会选择这样的东西：在新窗口中打开

正如其他人提到的那样，您选择的图标已被维基百科和其他网站广泛使用，以表示指向外部网站的链接。但这更多是个人喜好，而不是网络标准。

Question 7

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

它的注释是“重叠偏移窗口”。

HTML实体： 🗗

（fileformat.info）

Question 8

我能找到的最接近的是NORTH ARROW TO CORNER⇱和SOUTH EAST ARROW到CORNER⇲-但是创建这些图标的人都没有做NORTH EAST ARROW TO CORNER

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

Question 9

尝试| ͟↗̱ |：

|&#863;&nearr;&#817;|

并与Arial兼容

&#8739;&#863;&nearr;&#817;&#8739;

Question 10

尚未看到以下选项。
这只是CSS像这样结束：

参见此处：https : //codepen.io/Bets/pen/KGBqqb（以下运行片段未正确显示）

编辑：添加了另一个选项，不需要链接后的另一个元素。

   

 .newWindow {
      display:inline-block;
      margin-left:5px;
      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;
    }

a[target="_blank"] {
         position: relative;
    }

a[target="_blank"]:after {
     position: absolute;
     top: 3px;
     right: -15px;
     content: "\1f855";
     font-size: 13px;
     color: black;
     line-height: 3px;
     height: 5px;
     width: 5px;
     border-right: 2px solid white;
     border-top: 2px solid white;
}

a[target="_blank"]:before {
     position: absolute;
     top: 4px;
     right: -15px;
     content: " ";
     border: 1px solid black;
     width: 8px;
     height: 8px;
}

<a href="#">Link followed by span</a><span class="newWindow"></span>
<br/>
<a href="#" target="_blank">Just link</a>

展开摘要

Question 11

四个有用的符号：

⧉ &#x29C9; &#10697;　　U+29C9 TWO JOINED SQUARES
❐ &#x2750; &#10064;　　U+2750 UPPER RIGHT DROP-SHADOWED WHITE SQUARE
⍈ &#x2348; &#9032;　　U+2348 APL FUNCTIONAL SYMBOL QUAD RIGHTWARDS ARROW
⎘ &#x2398; &#9112;　　U+2398 NEXT PAGE

Question 12

在我的WordPress博客上，我不得不链接到多个站点，这些站点显然禁用了后退按钮（Facebook和Google翻译结果）。对于这些链接，我将其设置为打开新窗口。我收集了一些“新窗口”图标，但是它们总是打断行距（也许是WordPress的事情；图标周围没有多余的空间），所以我决定使用title =“”表示“链接打开新窗口” ”和链接内的文本图标[+]，在链接文本的末尾，以空格分隔。

Question 13

我知道我参加晚会很晚，但是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也是如此。

Question 14

如今，您可以使用备忘单中的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;
}

Question 15

附加的图片（任何人都可以免费使用或编辑）怎么样？在此处输入图片说明

1：在此处输入图片说明

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

Question 16

好的，我来晚了，但是这是我想出的改善其他所有人答案的方法：

<链接的模型>

我在这里找到了超级整洁的图标：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 />

展开摘要

它对我来说绝对是惊人的！
我可能永远不会再回到可能的解决方案了。