Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

开发者_Go百科

We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.

Closed 11 months ago.

This post was edited and submitted for review 11 months ago and failed to reopen the post:

Original close reason(s) were not resolved

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

---

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>

---

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.

---

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

↗️ or ↗

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

Html is ↗

---

There's also U+1F5D7 OVERLAP: