svg - 在文本旁边显示图标的最可靠方法

Question

有多种方法可以在文本旁边的页面中显示图形。我需要包含一个图形/图标，指示将打开一个新选项卡。

我知道至少可以使用这些不同的方法：

默认字体中的 Unicode 字符
来自 CSS 加载字体的 Unicode 字符
内联 SVG
内联 PNG

请提出一种方法来做到这一点，并解释为什么或为什么它在不同的浏览器和操作系统上很健壮。

score 120 · Accepted Answer

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>

score 53 · Accepted Answer

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

⧉</h1>

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 '带右上象限的白色方块' 字符：

◳</h1>

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 '右上角阴影白色方块'字符：

❐</h1>

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.

score 43 · Accepted Answer

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

↗️或↗</p>

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

html是↗

score 28 · Accepted Answer

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

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

HTML 实体：🗗

（文件格式信息）

score 27 · Accepted Answer

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

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

score 17 · Accepted Answer

没有既定的标准图标之类的东西。

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

score 12 · Accepted Answer

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

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

score 9 · Accepted Answer

好的，我参加聚会迟到了，但这是我想出的改进所有其他人的答案的方法：

<链接模型>

我在这里找到了超级整洁的图标：https:
//icons8.com/icon/43738/external-link 在这里缩小/优化了 SVG：https
://petercollingridge.appspot.com/svg-optimiser 并将生成的 SVG 的 base64 嵌入到指定ems 中所有尺寸的 CSS 样式规则：

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 />

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

score 8 · Accepted Answer

四个有用的符号：⧉ ❐ ⍈ ⎘</p>

⧉ &#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

score 8 · Accepted Answer

没有看到以下选项。
它只是 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>

score 5 · Accepted Answer

试试|͟↗̱|：

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

并且为了与 Arial 兼容

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

score 4 · Accepted Answer

我知道我迟到了，但 FWIW 这是我的解决方案¯\ (ツ) /¯,

HTML：

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

JavaScript：

香草JS

var tlinks = document.querySelectorAll("a[target=_blank]");
for (var x = 0; x < tlinks.length; x++) {
    tlinks[x].title = "Opens in new tab/window";
    var currentClass = tlinks[x].getAttribute("class");
    if (currentClass == null) currentClass = "";
    tlinks[x].setAttribute("class", currentClass + " new-tab");
}

或者

jQuery

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

CSS：

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

演示：

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

这个图标呢？

我很想能够使用这个图标，问题是它在 iOS 设备中不受支持，我认为 macOS 也是。

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

title每次创建在新选项卡中打开的链接时，我都不必手动添加属性。
我不必添加新窗口图标。
JavaScript 和 CSS 完成了繁重的工作，我需要做的就是添加target="_blank"，仅此而已。
如果我无法访问 HTML，但仍需要/想要增强界面的可访问性，我可以使用此方法来实现。
此方法适用于内联和块级元素。

score 4 · Accepted Answer

现在，您可以使用来自备忘单的 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;
}

score 2 · Accepted Answer

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

score 1 · Accepted Answer

附加图像（任何人都可以免费使用或编辑）之类的东西怎么样？在此处输入图像描述

1：在此处输入图像描述

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

score 1 · Accepted Answer

这是 SVG 的 177 个字符的“外部链接”符号：

<svg height="40" width="30" viewBox="0 0 1024 768"><path d="M640 768H128V258L256 256V128H0v768h768V576H640V768zM384 128l128 128L320 448l128 128 192-192 128 128V128H384z"/></svg>

<svg height="40" width="30" viewBox="0 0 1024 768"><path d="M640 768H128V258L256 256V128H0v768h768V576H640V768zM384 128l128 128L320 448l128 128 192-192 128 128V128H384z"/></svg>

...这里的来源包括关于为什么 Unicode拒绝实施“外部链接符号”的讨论。

score 0 · Accepted Answer

简短的回答是否定的，没有明确定义的图标可供使用。这里的回复中描述的任何图标都应该足够了，但是......

由于该图标旨在满足WCAG 成功标准 3.2.5：根据要求更改，因此需要以视觉和辅助方式描述其目的。

为了满足这个要求，我建议为嵌入的图标添加一个 aria 标签，或为图像添加替代文本，以及赋予图标含义的标题。

<a href="someplace.html" target="_blank">Link description
    <svg aria-label="New window" title="New window" style="fill:currentColor;width:1em;height:1em" viewBox="0 0 24 24">
        <path d="M5 3C4 3 3 4 3 5v14c0 1 1 2 2 2h14c1 0 2-1 2-2v-7h-2v7H5V5h7V3H5zm9 0v2h3.6l-9.3 9.3 1.4 1.4L19 6.4V10h2V3h-7z"/>
    </svg>
</a>

或者，如果在链接的背景中设置了“新窗口”图标，如 [target="blank"]::after 提供的解决方案：

<a href="someplace.html" target="_blank" title="New window" aria-label="Link description (opens in new window)">Link description</a>

svg - 在文本旁边显示图标的最可靠方法

17 回答 17

⧉</h1>
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 '带右上象限的白色方块' 字符：

◳</h1>
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 '右上角阴影白色方块'字符：

❐</h1>
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`.

svg - 在文本旁边显示图标的最可靠方法

17 回答 17

⧉</h1> 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 '带右上象限的白色方块' 字符：

◳</h1> 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 '右上角阴影白色方块'字符：

❐</h1> 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.

Related

Reference

⧉</h1>
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 '带右上象限的白色方块' 字符：

◳</h1>
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 '右上角阴影白色方块'字符：

❐</h1>
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`.