New Window Icon (for web accessibility)

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.

Answer 1

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>

Answer 2

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.