Most robust method for showing Icon next to text

Question

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.

user_465139 · Answer

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

external link

user_487030 · Answer

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.

user_79456 · Answer

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.

user_11068024 · Answer

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: "";
  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 external link is super pretty! 

In all sizes!

Even super large ones!

And in super tiny ones too!

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

Admin · Answer

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

user_4862266 · Answer

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

Link followed by span


Just link

user_8439175 · Answer

Try |͟↗̱|:

|͟↗̱|

And for compatibility with Arial

∣͟↗̱∣

user_321555 · Answer

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

HTML:

Your link

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.

Admin · Answer

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

user_8112776 · Answer

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

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

user_16281492 · Answer

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.

Link description

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

Link description

Most robust method for showing Icon next to text

17 Answers