102

ページ内のテキストの横にグラフィックを表示するには、さまざまな方法があります。新しいタブが開かれることを示すグラフィック/アイコンを含める必要があります。

少なくともこれらの異なる方法を使用して実行できることはわかっています。

  • デフォルトのフォントの Unicode 文字
  • CSS ロードフォントの Unicode 文字
  • インライン SVG
  • インライン PNG

これを行う方法を提案し、さまざまなブラウザーやオペレーティング システムで堅牢である理由または理由を説明してください。

4

17 に答える 17

43

Open-in-new-window のこの Unicode 記号が気に入っています

↗️ または ↗</p>

North East Arrow utf-8 html を使用していることを確認してください。

HTMLは&#x2197;

于 2017-08-21T22:31:58.933 に答える
27

私は次のようなもので行きます：新しいウィンドウで開きます

他の人が言及したように、選択したアイコンは、外部サイトへのリンクを表すためにウィキペディアや他のサイトで広く使用されています。ただし、これは個人的な好みであり、Web 標準ではありません。

于 2012-03-25T23:03:37.150 に答える
17

確立された標準的なアイコンなどというものはありません。

たとえば、選択したアイコンは、外部の Web サイト (ウィキペディアに属していない) へのリンクを示すためにウィキペディアで使用されているものと似ています。ただし、Web サイト全体で使用できるため、独自のページ内で規則を確立できます。そのアイコンでマークされたすべてのリンクは新しいページを開く必要があり、アイコンでマークされていないすべてのリンクは同じページで開く必要があります。安定したユーザーベースがあれば、アクセシビリティを向上させることができます。ユーザーベースは、あなたの慣習に慣れる機会があります。あなたのサイトが主に 1 回限りの訪問者によって訪問されている場合、視覚的な混乱を追加しているだけです。

于 2009-12-14T09:27:24.313 に答える
12

私が見つけた最も近いものは、コーナーへの北西矢印 ⇱ と コーナーへの南東矢印 ⇲ でしたが、これらのアイコンを作成した人は、コーナーへの北東矢印を実行しませんでした

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

于 2012-08-29T06:51:56.503 に答える
9

OK、私はパーティーに遅れましたが、他のすべての人々の回答を改善するために私が思いついたものは次のとおりです。

<リンクのモックアップ>外部リンク アイコン

ここで非常にきれいなアイコンを見つけました: https://icons8.com/icon/43738/external-link
ここで SVG を縮小/最適化しました: https://petercollingridge.appspot.com/svg-optimiser
結果の SVG の base64 をsですべてのサイズを指定する CSS スタイル ルールem:

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 />

それは私にとって絶対に驚くほどうまくいきます！
解決策が何であれ、私はおそらく決して戻ることはありません。

于 2020-12-19T14:04:01.340 に答える
8

次のオプションは見ていません。
それは単なる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: 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>

于 2018-10-22T08:17:58.190 に答える
5

|͟↗̱|を試してください:

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

また、Arial との互換性のために

&#8739;&#863;&nearr;&#817;&#8739;
于 2017-10-10T09:06:59.183 に答える
4

最近では、Font Awesome 5 のアイコン、チートシート - solid iconsを使用できます。

ここに画像の説明を入力

選ばれたアイコンに近いもの。

solid.cssを見ると、フォントの名前が「Font Awesome 5 Free」であることがわかりました。

a[target='_blank']::after {
    content: ' \f35d';
    font-family: "Font Awesome 5 Free";
    color: blue;
}

または、Font Awesome css を使用せず、フォントのみをターゲットにしたい場合:

@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;
}
于 2020-04-08T15:45:35.310 に答える
2

私の WordPress ブログでは、明らかに戻るボタンを無効にしているいくつかのサイト (Facebook と Google 翻訳の結果) にリンクする必要がありました。これらのリンクについては、新しいウィンドウを開くように設定しました。小さな「新しいウィンドウ」アイコンを集めましたが、それらは常に行間を妨げます (おそらく WordPress の問題です。アイコンの周りに余分なスペースはありません)。 " と、リンク内のテキスト アイコン [+] は、リンク テキストの末尾にあり、スペースで区切られています。

于 2011-12-24T13:53:06.053 に答える
1

添付画像のようなもの（どなたでも自由に使用、加工していただけます）はいかがでしょうか？ここに画像の説明を入力

1 :ここに画像の説明を入力

これを既存の単一ボタンの右側に追加して、リンクをクリックして新しいウィンドウで開くオプションをユーザーに提供する水平ボタングループにすることを考えています。

于 2012-12-01T19:11:05.943 に答える
0

簡単な答えはノーです。使用する明確に定義されたアイコンはありません。ここの回答に記載されているアイコンで十分ですが...

アイコンはWCAG 達成基準 3.2.5: 要求に応じて変更 を満たすことを目的としているため、その目的を視覚的にも補助的にも説明する必要がある。

その要件を満たすために、埋め込みアイコンに aria ラベルを追加するか、画像に alt テキストを追加して、アイコンに意味を与えるタイトルを付けることをお勧めします。

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

または、[target="blank"]::after ソリューションのように、「新しいウィンドウ」アイコンがリンクの背景に設定されている場合:

<a href="someplace.html" target="_blank" title="New window" aria-label="Link description (opens in new window)">Link description</a>
于 2021-11-27T12:43:50.757 に答える