Most robust method for showing Icon next to text

SvgUnicodePngHref

Svg Problem Overview

There are different ways to show graphics in a page next to text. I need to include a graphic/icon that indicates a new tab will be opened.

I know it's possible to do using at least these different methods:

  • Unicode character from default fonts
  • Unicode character from CSS loaded fonts
  • Inline SVG
  • Inline PNG

Please suggest a method to do this, and explain why or why not it's robust on different browsers and operating systems.

Svg Solutions

Solution 1 - Svg

I am coming late to this party, but look what I have found at CodePen !

enter image description here

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>

Solution 2 - Svg

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

Two Joined Squares

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

White Square with Upper Right Quadrant

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

Upper Right Drop-Shadowed White Square

CSS

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

Support

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

Solution 3 - Svg

I like this unicode symbol for Open-in-new-window

↗️ or ↗

North East Arrow Make sure you're using utf-8 html.

Html is &#x2197;

Solution 4 - Svg

There's also U+1F5D7 OVERLAP: , added in Unicode 7.0 (June 2014).

Its comment is "overlapping offset windows".

HTML entity: &#x1F5D7;

(fileformat.info)

Solution 5 - Svg

I'd go with something like this: opens in a new window

The icon you have chosen, as others have mentioned, is widely used by wikipedia and other sites to represent links to external sites. But this is more of a personal preference and not a web standard.

Solution 6 - Svg

There's no such a thing as an established standard icon.

For example, the icon you chose is similar to the one used in wikipedia to mark links pointing to external websites (not belonging to wikipedia). You may however use it across your websites, and thus establish a convention within your own pages. Just make sure you do so consistently: ALL links marked with that icon MUST open to a new page, and ALL links not marked with it should open in the same page. You may improve accessibility, provided that you have a stable user base, who will have the chance to get used to your conventions. If your site is visited mostly by one-time visitors, then you'd be just adding visual clutter.

Solution 7 - Svg

The closest I could find was NORTH WEST ARROW TO CORNER ⇱ and SOUTH EAST ARROW TO CORNER ⇲ -- but whoever created these icons didn't do NORTH EAST ARROW TO CORNER

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

Solution 8 - Svg

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

<mockup of a link> external link icon

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: "";
  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.

Solution 9 - Svg

Four useful symbols: ⧉ ❐ ⍈ ⎘

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

Solution 10 - Svg

Haven't seen the following option.
It's just css and ends up like this: open in new window icon

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>

Solution 11 - Svg

Try |͟↗̱|:

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

And for compatibility with Arial

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

Solution 12 - Svg

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");
}

Or

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.

Solution 13 - Svg

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

enter image description here

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

Solution 14 - Svg

On my WordPress blog, I've had to link to several sites that apparently disable the back button (Facebook and Google Translate results). For those links I set them to open a new window. I've collected little "new window" icons but they always interrupt the line spacing (maybe it's a WordPress thing; there's no extra space around the icons) so I decided to go with a title="" that says "Link opens new window" and a text icon [+] within the link, at the end of the link text, separated by a space.

Solution 15 - Svg

Here's an "external link" symbol from 177 characters of SVG:
external link symbol

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

Solution 16 - Svg

How about something like the attached image (which anyone's free to use or edit)?enter image description here

1: enter image description here

I'm thinking of adding this to the right of existing single buttons so they become a horizontal button group giving users the option to click the link and open it in a new window.

Solution 17 - Svg

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>
Categories
Recommended Svg Solutions
Recommended Unicode Solutions
Recommended Png Solutions
Recommended Href Solutions

Previous Solution:

Maximum size for a SQL Server Query? IN clause? Is there a Better Approach

SqlSql ServerTsqlLimits

Next Solution:

How to get C#.Net Assembly by name?

C#Assemblies

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionLee EnglestoneView Question on Stackoverflow
Solution 1 - SvgLaryx DeciduaView Answer on Stackoverflow
Solution 2 - SvgJohnView Answer on Stackoverflow
Solution 3 - SvgTrophyGeekView Answer on Stackoverflow
Solution 4 - SvgRobert K. BellView Answer on Stackoverflow
Solution 5 - SvgGichambaView Answer on Stackoverflow
Solution 6 - SvgPalantirView Answer on Stackoverflow
Solution 7 - SvgchovyView Answer on Stackoverflow
Solution 8 - SvgpaulView Answer on Stackoverflow
Solution 9 - Svguser8617716View Answer on Stackoverflow
Solution 10 - SvgbetsView Answer on Stackoverflow
Solution 11 - SvgPeter RaderView Answer on Stackoverflow
Solution 12 - SvgRicardo ZeaView Answer on Stackoverflow
Solution 13 - Svguser4864425View Answer on Stackoverflow
Solution 14 - SvgPete HummersView Answer on Stackoverflow
Solution 15 - SvgashleedawgView Answer on Stackoverflow
Solution 16 - SvgMark GavaganView Answer on Stackoverflow
Solution 17 - Svg2kool2View Answer on Stackoverflow