如何在文本旁边显示图标的最佳做法是什么？

Question

在文本旁边展示图形有不同的方法。 我需要在超链接旁边包含一个图标，表示将打开一个新的标签页。

我至少知道以下几种可能使用的不同方法：

- 默认字体中的Unicode字符 - 从CSS加载的字体中的Unicode字符 - 内联SVG - 内联PNG

这些方法中哪个最可靠/可行？ 是否有其他更好的技术？ 是否有任何需要注意的注意事项？

- Lee Englestone

---

那个图标有对应的Unicode字符吗？还是我应该使用一张图片？ - collimarco

@collimarco ，他在问题中使用了一张图片。这不是一个图标。 - pbarney

Answer 1

我来晚了，但是看看我在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>

- András Aszódi

---

@wOxxOm：感谢您的编辑和代码片段。有趣的是，在我的手中，a[target="_blank"]:after 中的单冒号可以在 Safari 11.1 和 Firefox 61 中使用。哪个浏览器需要双冒号？请随意编辑答案。谢谢。 - András Aszódi

据我所知，所有浏览器都支持“不正确”的单冒号语法。可能是因为太多人不知道或不关心伪元素和伪类之间的区别。 - wOxxOm

这绝对比包含整个自定义字体更好，只是为了添加一个链接图标 =p - IncredibleHat

非常整洁，但它不能随字体缩放。 :( - Greg Pettit

添加 'filter' CSS 属性解决了问题！filter: brightness(0) invert(1); - Bexultan Myrzatay

Answer 2

对于许多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 中的 'Two Joined Squares' 字符：

⧉

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

◳

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 '右上方带阴影的白色正方形' 字符：

❐

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。

- John

---

我怀疑大多数用户不会将这些符号识别为外部链接的符号。 - MrUpsidown

我怀疑只是批评而没有提供更客观的替代方案，这并不能为世界带来任何好处。 - John

Answer 3

我喜欢这个打开新窗口的Unicode符号

↗️ 或者 ↗

东北箭头请确保您正在使用utf-8 html。

HTML代码是↗

- TrophyGeek

---

有没有一种简单的方法来改变它的颜色？ - Peanuts

这只是文本，因此<span style="color: purple">&#x2197;</span>即可。 - TrophyGeek

Unicode是最安全的答案（可以自动缩放文本）。我通常使用内联样式font-family：unicode; font-size：smaller;，这样可以避免着色并且看起来更好。我还使用这个更粗、更方的箭头，对我来说更清晰：U+1F875。 - Joel Wigton

Answer 4

另外还有一个U+1F5D7 OVERLAP, 这是在Unicode 7.0（2014年6月）中添加的。

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

HTML实体：🗗

---

(fileformat.info)

- Robert K. Bell

---

不支持在Mac OS上，2017年。 - Julian

我不会依赖这个...在Windows 10、Google Chrome中，它在2021年3月无法工作。 - Roger

Answer 5

我会选择这样的东西：

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

- Gichamba

---

@www-0av-Com 不是挑剔，但 alt 属性应该用于描述图像，因此在您的示例中可以这样写：alt="新窗口图标"。话虽如此，title 属性将在悬停时显示工具提示，这在可访问性和可用性方面非常好：title="链接在新选项卡中打开"，尽管我现在更喜欢说“新选项卡”而不是“新窗口”。请查看我的完整答案 https://dev59.com/7XI-5IYBdhLWcg3wW24L#51700279 - Ricardo Zea

非常晚了，但我不能让这个评论没有反驳就这样存在。在这些情况下，alt属性绝对不应该描述图像的外观，也不应该提到“图标”或“图像”。alt文本应该描述图像的功能，因为它是一个功能图像。选择alt文本时，没有单一的规则适用于“描述图像”——上下文是关键。阅读整篇WebAIM 替代文本文章——非常好。 - Stephen P

Answer 6

并不存在一个既定的标准图标。

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

- Palantir

---

是的，谢谢，这证实了我的怀疑。 我想互联网唯一不具备的特点就是“一致性”。 - Lee Englestone

如果有其他人正在寻找维基百科外部链接图标的公共领域副本，可以在这里找到：http://commons.wikimedia.org/wiki/File:External.svg（你可能需要自己将其转换为光栅图像 - 由于某种原因，预先转换为光栅图像的版本是GPL许可证）。 - Tobias Cohen

如果矢量图是GPL许可的，那么光栅图也将是GPL许可的，因为它是一个派生作品。然而，根据该链接，该图标是公共领域，因此可以自由地在矢量和光栅形式中使用。 - Mark E. Haase

我将Ben的图标和John的CSS结合起来，最终得到了一个不错的解决方案 :) - RozzA

实际上，有人费尽心思地撰写了一份详细的提案，希望将这个符号纳入Unicode中：http://www.europatastatur.de/material/Unicode_Proposal_External_Link.pdf。已经过去了10年...但它仍然没有被纳入。 - Jealie

关于可访问性，您可以在CSS内容块中的斜杠后面添加一个可访问名称，例如 a[download]::before {content:"\2B73" / "download";} - undefined

Answer 7

好的，我来晚了，但是我改进了其他人的答案，这是我想出来的： 我在这里找到了一个非常棒的图标：https://icons8.com/icon/43738/external-link
在这里进行了SVG的压缩/优化：https://petercollingridge.appspot.com/svg-optimiser
然后将结果的SVG嵌入到一个CSS样式规则中，使用em作为所有尺寸的单位：

a[target="_blank"]::after {
  content: "" / "opens in new tab/window";
  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 />

这对我来说真是太棒了！ 我可能再也不会回到其他可能的解决方案了。

- paul

---

同时，我发现将选择器指定为 a[target="_blank"]:not(.no-external-link-icon)::after 是很有用的，这样你就可以通过向 <a> 元素添加类 no-external-link-icon 来禁用图标显示。 - paul

超棒的一站式解决方案。谢谢！ - avalanche1

绝-对-精-彩！在Icons8页面上，您还可以更改颜色并赋予其透明背景。正是我所需要的！ :-) - Frank Conijn - Support Ukraine

Answer 8

我能找到的最接近的是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

- chovy

---

您可以使用CSS将其旋转以获得东北方向。 - Brian Tingle

我认为在它们被创建时这不是一个选项，但对于 CSS 来说是可以的。 - chovy

Answer 9

我没看到下面的选项。
这只是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>

- bets

---

很好，但当我按下“运行代码片段”时得到的结果看起来不像那张图片。 - c z

看起来还不错，但是CSS太复杂了，无法将其作为样式修改器添加到链接样式中，例如a[target="_blank"]::after。您的解决方案需要在每个需要它的链接的HTML中包含div。其他解决方案不需要更改HTML。它只会将符号添加到指定了target属性的链接中。 - awe

@awe 你说得对，所以我添加了第二个选项，可以在不改变HTML的情况下工作。 - bets

Answer 10

四个有用的符号：⧉ ❐ ⍈ ⎘。

⧉ ⧉ ⧉　　U+29C9 TWO JOINED SQUARES
❐ ❐ ❐　　U+2750 UPPER RIGHT DROP-SHADOWED WHITE SQUARE
⍈ ⍈ ⍈　　U+2348 APL FUNCTIONAL SYMBOL QUAD RIGHTWARDS ARROW
⎘ ⎘ ⎘　　U+2398 NEXT PAGE

- user8617716