Font Awesomeを使って外部リンクのみに特定のアイコンを自動で付ける

target=”_blank”を使って外部リンクをするときのみ、リンクの後ろに外部リンクを表す特定のアイコンを付けてみましょう。

<a>にtarget=”_blank”が入っているものを外部リンクと判断して、自動でアイコンを付けるのがコツです。

アイコンはFont Awesomeを使ってみましょう。

CONTENTS

サンプル

サンプルを見てみましょう。

サンプルでは2つのリンクがあり、target=”_blank”が付いているリンクにのみ外部リンクを示すアイコンが付いています。

HTMLはこんな感じです。

<div><a href="#">リンク</a></div>
<div><a href="#" target="_blank">外部リンク</a></div>

<head>にFont AwesomeのJavaScriptを読み込んでおいてから、外部リンクにtarget=”_blank”を付けておきます。

CSSはこんな感じです。

a[target="_blank"] {
  &:after {
    font-family: "Font Awesome 6 Free";
    content: "\f08e";
    font-weight: 900;
    margin: 0 0.25rem;
  }
}

「a要素のtarget属性に_blankという文字列が完全一致する」というCSSの属性セレクタを使います。今回は完全一致の属性セレクタを使いましたが、属性の直後にアスタリスクを付けると部分一致にできるので、下記のような活用もできます。

span[title*="県"] {
  color: red;
}

こうすることで、title=”神奈川県”やtitle=”埼玉県”となっている場合にはセレクタの「県」が部分一致するのでフォントは赤色になりますが、title=”東京都”となっている場合には部分一致していないのでフォントは赤色になりません。

afterの疑似要素にはfont-familyでFont Awesomeを読み込み、contentにFont AwesomeのUnicodeを指定します。アイコンによってはfont-weightを指定しないと表示されないものがあるので、今回は900という値を指定しています。

&:after {
  font-family: "Font Awesome 6 Free";
  content: "\f08e"; // Unicodeの前には必ずバックスラッシュを入れておきましょう。
  font-weight: 900;
  margin: 0 0.25rem;
}

marginはアイコンとリンクテキストの隙間を調整するものなので、無視してもだいじょうぶです。