有多种方法可以在文本旁边的页面中显示图形。我需要包含一个图形/图标,指示将打开一个新选项卡。
我知道至少可以使用这些不同的方法:
- 默认字体中的 Unicode 字符
- 来自 CSS 加载字体的 Unicode 字符
- 内联 SVG
- 内联 PNG
请提出一种方法来做到这一点,并解释为什么或为什么它在不同的浏览器和操作系统上很健壮。
我参加这个聚会迟到了,但看看我在 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>
对于许多 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、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
.
我会用这样的东西:
正如其他人所提到的,您选择的图标被维基百科和其他网站广泛用于表示指向外部网站的链接。但这更多是个人喜好,而不是网络标准。
没有既定的标准图标之类的东西。
例如,您选择的图标类似于维基百科中用于标记指向外部网站(不属于维基百科)的链接的图标。但是,您可以在您的网站上使用它,从而在您自己的页面中建立约定。只需确保您始终如一地这样做:所有标有该图标的链接都必须打开到一个新页面,并且所有未标有它的链接应该在同一页面中打开。如果您有一个稳定的用户群,他们将有机会习惯您的约定,您就可以提高可访问性。如果您的网站主要由一次性访问者访问,那么您只会添加视觉混乱。
我能找到的最接近的是 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
好的,我参加聚会迟到了,但这是我想出的改进所有其他人的答案的方法:
我在这里找到了超级整洁的图标:https:
//icons8.com/icon/43738/external-link 在这里缩小/优化了 SVG:https
://petercollingridge.appspot.com/svg-optimiser
并将生成的 SVG 的 base64 嵌入到指定em
s 中所有尺寸的 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 />
它对我来说绝对是惊人的!
我可能永远不会回到可能存在的任何解决方案。
四个有用的符号:⧉ ❐ ⍈ ⎘</p>
⧉ ⧉ ⧉ 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
见这里: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>
试试|͟↗̱|:
|͟↗̱|
并且为了与 Arial 兼容
∣͟↗̱∣
我知道我迟到了,但 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: "⇱";
position: relative;
top: -5px;
margin-left: 2px;
transform: rotate(90deg);
}
演示:
这是一支笔:https ://codepen.io/ricardozea/pen/dyVXXVr (例如,此链接应该在新窗口中打开,哈哈)。
这个图标呢?
我很想能够使用这个图标,问题是它在 iOS 设备中不受支持,我认为 macOS 也是。
多年来,这项技术对我非常有用,因为:
title
每次创建在新选项卡中打开的链接时,我都不必手动添加属性。target="_blank"
,仅此而已。现在,您可以使用来自备忘单的 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;
}
在我的 WordPress 博客上,我不得不链接到几个明显禁用后退按钮的网站(Facebook 和谷歌翻译结果)。对于这些链接,我将它们设置为打开一个新窗口。我收集了一些小的“新窗口”图标,但它们总是打断行距(可能是 WordPress 的问题;图标周围没有多余的空间)所以我决定使用一个标题 =“”,上面写着“链接打开新窗口” " 和链接中的文本图标 [+],位于链接文本的末尾,以空格分隔。
<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>
简短的回答是否定的,没有明确定义的图标可供使用。这里的回复中描述的任何图标都应该足够了,但是......
由于该图标旨在满足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>