当前位置：文江博客话题详情

在文本旁边显示图标的最佳实践是什么

发布于 2024-08-14 19:47:31 字数 1812 浏览 7 评论 0原文

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

栩栩如生 2024-08-21 19:47:31

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

I am coming late to this party, but 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>

回复收藏 0 原文

贪了杯 2024-08-21 19:47:31

对于许多 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

< img src="https://i.sstatic.net/Z4bLX.png" alt="两个相连的方块">

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，<代码>门洛。

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。

For many Unicode characters you'll need to use the following font (at least for Windows, please comment for Linux and Mac if you're able to test):

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

Also you can apply CSS selectors to use the target attribute as so:

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

Keep in mind that browsers are funny about the behavior of the a selector and a:link / a:visited so definitely test with that in mind.

Unicode 'Two Joined Squares' character:

⧉

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

CSS

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

Support

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

Unicode 'White Square with Upper Right Quadrant' character:

◳

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

CSS

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

Support

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

Unicode 'Upper Right Drop-Shadowed White Square' character:

❐

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

CSS

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

Support

Mac OS X 10.10 Yosemite has three fonts: Arial Unicode MS, Menlo and Zapf Dingbats.

回复收藏 0 原文

你是暖光i 2024-08-21 19:47:31

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

↗️
或者
↗

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

Html 为 ↗

回复收藏 0 原文

伊面 2024-08-21 19:47:31

还有 U+1F5D7 OVERLAP:

回复收藏 0 原文

如若梦似彩虹 2024-08-21 19:47:31

我会选择这样的东西： opens in a new window

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

回复收藏 0 原文

一曲琵琶半遮面シ 2024-08-21 19:47:31

好吧，我参加聚会迟到了，但这是我对所有其他人的答案进行改进的结果：

<链接的模型>

我在这里找到了超级整洁的图标：https://icons8.com/icon/ 43738/external-link
在此处缩小/优化了 SVG：https://petercollingridge.appspot.com/svg-optimiser< br>
并将生成的 SVG 的 base64 嵌入到 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!

OK, I'm late to the party, but here's what I came up with improving on all the other folk's answers:

I found super neat icon here: https://icons8.com/icon/43738/external-link
Minified/optimized the SVG here: https://petercollingridge.appspot.com/svg-optimiser
And embedded base64 of the resulting SVG into a CSS style rule specifying all the sizes in ems:

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

It works absolutely amazing for me!
I'm probably never going back to whatever solution there might be.

回复收藏 0 原文

妥活 2024-08-21 19:47:31

不存在所谓既定的标准图标之类的东西。

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

回复收藏 0 原文

梦中的蝴蝶 2024-08-21 19:47:31

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

回复收藏 0 原文

猫弦 2024-08-21 19:47:31

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

Haven't seen the following option.
It's just css and ends up like this:

See here: https://codepen.io/Bets/pen/KGBqqb (the run snippet below does not display right)

Edit: Added another option that does not need another element after link.

   

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

回复收藏 0 原文

如歌彻婉言 2024-08-21 19:47:31

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

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

Four useful symbols: ⧉ ❐ ⍈ ⎘

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

回复收藏 0 原文

幸福丶如此 2024-08-21 19:47:31

我知道我参加聚会迟到了，但FWIW这是我的解决方案 ́\(ツ)/́,

HTML:

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

JavaScript:

Vanila 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: "⇱";
    position: relative;
    top: -5px;
    margin-left: 2px;
    transform: rotate(90deg);
}

演示：

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

这个图标

I know I'm late to the party, but FWIW here's my solution ¯\(ツ)/¯,

HTML:

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

JavaScript:

Vanila 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: "⇱";
    position: relative;
    top: -5px;
    margin-left: 2px;
    transform: rotate(90deg);
}

Demo:

Here's a Pen: https://codepen.io/ricardozea/pen/dyVXXVr (this link, for example, SHOULD open in a new window, lol).

What about this icon ?????

I would've loved to be able to use this icon ????, the problem is that it's not supported in iOS devices and I think macOS either.

For years this technique has been very useful for me because:

I don't have to manually add a title attribute every time I create a link that opens in a new tab.
I don't have to add the new window icon.
The JavaScript and the CSS do the heavy lifting, all I need to do is add target="_blank" and that's it.
If I don't have access to the HTML but still need/want to enhance the accessibility of an interface, I can do so with this method.
This method works great for both inline and block-level elements.

回复收藏 0 原文

羁拥 2024-08-21 19:47:31

尝试 |͟↗̱|：

|͟↗̱|

并与 Arial 兼容

∣͟↗̱∣

Try |͟↗̱|:

|͟↗̱|

And for compatibility with Arial

∣͟↗̱∣

回复收藏 0 原文

星 2024-08-21 19:47:31

现在，您可以使用 Font Awesome 5 中的图标，来自 cheatsheet - 实心图标：

在此处输入图像描述 < /a>

这与所选的图标很接近。

查看 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;
}

Nowadays you can use the icons from Font Awesome 5, from cheatsheet - solid icons:

Which comes close to the icon that was chosen.

Looking at solid.css I noticed that the name of the font is "Font Awesome 5 Free":

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

Or in case you don't use Font Awesome css and want to target the font only:

@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;
}

回复收藏 0 原文

甜心 2024-08-21 19:47:31

这是由 177 个 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 拒绝实施“外部链接标志”。

Here's an "external link" symbol from 177 characters of 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>

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

...and here's the source including discussion on why Unicode rejected implementation of an "external link sign".

回复收藏 0 原文

迷爱 2024-08-21 19:47:31

在我的 WordPress 博客上，我必须链接到几个显然禁用后退按钮的网站（Facebook 和 Google 翻译结果）。对于这些链接，我将它们设置为打开一个新窗口。我收集了一些“新窗口”图标，但它们总是会打断行距（也许这是 WordPress 的问题；图标周围没有额外的空间），所以我决定使用 title="" ，上面写着“链接打开新窗口” " 以及链接内的文本图标 [+]，位于链接文本的末尾，以空格分隔。

回复收藏 0 原文

不如归去 2024-08-21 19:47:31

类似于附加图像（任何人都可以自由使用或编辑）之类的内容怎么样？在此处输入图像描述

1: enter image description here

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

回复收藏 0 原文

与他有关 2024-08-21 19:47:31

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

因为该图标旨在满足 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>

The short answer is no, there's not a well defined icon to use. Any icon described in the responses here should suffice but...

As the icon is aimed at meeting a WCAG Success Criterion 3.2.5: Change on request, its purpose needs to be described, both visually and assistively.

To meet that requirement I suggest adding an aria label to an embedded icon, or alt text to an image, along with a title to give the icon meaning.

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

Or, if the "New window" icon is set in the background of the link, as in the [target="blank"]::after solutions offered:

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

回复收藏 0 原文

~没有更多了~

关于作者

黯淡〆

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

在文本旁边显示图标的最佳实践是什么

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（17）

⧉

◳

❐

⧉

◳

❐

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

在文本旁边显示图标的最佳实践是什么

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（17）

⧉

◳

❐

⧉

◳

❐

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。