Ответ 1

Нет такой вещи, как установленная стандартная иконка.

Например, выбранный вами значок аналогичен используемому в Википедии знакам, указывающим на внешние веб-сайты (не принадлежащие к википедии). Тем не менее, вы можете использовать его на своих сайтах и ​​тем самым устанавливать соглашение на своих собственных страницах. Просто убедитесь, что вы делаете это последовательно: ВСЕ ссылки, отмеченные этим значком, ДОЛЖНЫ открываться на новую страницу, а ВСЕ ссылки, не отмеченные им, должны открываться на той же странице. Вы можете улучшить доступность при условии, что у вас есть стабильная база пользователей, у которой будет возможность привыкнуть к вашим соглашениям. Если ваш сайт посещают в основном одноразовые посетители, то вы просто добавляете визуальный беспорядок.

Ответ 2

Для многих символов Юникода вам нужно использовать следующий шрифт (по крайней мере, для 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 ' Upper Right Drop-Shadowed White Square ':

❐

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.

Ответ 3

Я бы сказал что-то вроде этого:

Значок, который вы выбрали, как упомянули другие, широко используется википедии и другими сайтами для представления ссылок на внешние сайты. Но это скорее личное предпочтение, а не веб-стандарт.

Ответ 4

Я опаздываю на эту вечеринку, но посмотрите, что я нашел на 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>

Ответ 5

Там также U+1F5D7 OVERLAP: 🗗, добавленный в Unicode 7.0 (июнь 2014 г.).

В его комментарии есть "перекрывающиеся окна смещения".

HTML-объект: 🗗

(fileformat.info)

Ответ 6

Мне нравится этот символ Unicode для Open-in-new-window

↗️ или ↗

North East Arrow Убедитесь, что вы используете utf-8 html.

HTML - это ↗

Ответ 7

Ближайшим, что я мог найти, была СЕВЕРНАЯ ЗАПАДНАЯ СТРЕЛКА К УГОЛУ ⇱ И ЮГО ВОСТОЧНАЯ СТРЕЛКА К УГОЛОКу ⇲ - но тот, кто создал эти значки, не сделал ВОССТАНОВЛЕНИЕ СЕВЕРНОГО ВОСТОКА К УГОЛУ

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

Ответ 8

Попробуйте | ͟ ⇗ |:

|͟⇗̱|

И для совместимости с Arial

∣͟⇗̱∣

Ответ 9

Три полезных символа: ❐⍈⎘

❐ ❐ ❐　　U+2750 UPPER RIGHT DROP-SHADOWED WHITE SQUARE
⍈ ⍈ ⍈　　U+2348 APL FUNCTIONAL SYMBOL QUAD RIGHTWARDS ARROW
⎘ ⎘ ⎘　　U+2398 NEXT PAGE

Ответ 10

В моем блоге WordPress мне пришлось ссылаться на несколько сайтов, которые, по-видимому, отключили кнопку "Назад" (результаты Facebook и Google Translate). Для этих ссылок я установил их для открытия нового окна. Я собрал маленькие значки "нового окна", но они всегда прерывают межстрочный интервал (возможно, это вещь WordPress, нет лишнего места вокруг значков), поэтому я решил пойти с заголовком = ", в котором говорится:" Ссылка открывается в новом окне "и текстовый значок [+] в ссылке, в конце текста ссылки, разделенный пробелом.

Ответ 11

Я знаю, что я опоздал на вечеринку, но FWIW здесь мое решение ¯\_ (ツ) _/¯,

HTML:

<a href="#" target="_blank">Your link</a>

JQuery:

Если вам известна ванильная версия JS, сообщите нам, я был бы рад добавить ее сюда (я не разработчик JS 😊)

$("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/anon/pen/MBBXjP (эта ссылка, например, ДОЛЖНА открываться в новом окне, смеется).

В течение многих лет эта техника была очень полезна для меня, потому что:

• Мне не нужно вручную добавлять атрибут title каждый раз, когда я создаю ссылку, которая открывается в новой вкладке.
• Мне не нужно добавлять новый значок окна.
• JavaScript и CSS делают тяжелую работу, все, что мне нужно сделать, это добавить target="_blank" и все.
• Если у меня нет доступа к HTML, но мне все еще нужно/я хочу улучшить доступность веб-сайта/веб-приложения, я могу сделать это с помощью этого метода.
• Этот метод отлично работает как для встроенных, так и для блочных элементов.

Мне бы очень хотелось использовать этот значок 🗗, проблема в том, что он не поддерживается на устройствах iOS, и я думаю, что macOS тоже.

Ответ 12

Не видел следующий вариант.
Это просто CSS и заканчивается так:

Смотрите здесь: 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: 12px;
     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>

Ответ 13

Как насчет чего-то вроде прикрепленного образа (который любой может использовать или редактировать)?

1:

Я подумываю добавить это справа от существующих одиночных кнопок, чтобы они стали горизонтальной группой кнопок, предоставляя пользователям возможность щелкнуть ссылку и открыть ее в новом окне.