target="_blank"の外部リンクに別タブで開くアイコンを表示する

こんにちは、Ryohei（@ityryohei）です！

本記事では、Font Awesomeを使用して、target="_blank"の外部リンクに別タブで開くアイコンを表示する方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

Font Awesomeのアカウントを作成してアイコンセットを取得する

本記事ではFont Awesomeのアイコンを使用します。Font Awesomeには無料版とプロ版のアイコンセットが用意されていますが、今回はフリー版を使用します。

アカウントの作成は下記のリンクから。Start for Freeを選択後、メールアドレスを入力して登録してください。

https://fontawesome.com/

アカウントの作成が完了すると、アカウントページにアクセスできるようになります。今回はCDNを使用しますので、下記のリンクからlinkタグを取得します。

https://fontawesome.com/account/cdn

アイコンを表示するページで取得したlinkタグを読み込みます。アイコンの設定を変更することができますが、本記事では下記の設定で取得したCDNを使用します。

• Free
• all
• Webfont

以上でFont Awesomeのアカウントの作成とCDNの取得まで完了しました。続いてtarget="_blank"の外部リンクに別タブのアイコンを表示するスタイルを定義していきます。

target="_blank"の外部リンクに別タブで開くアイコンを表示する

下記が外部リンクに別タブで開くアイコンを表示する際のサンプルソースです。前項で取得したアイコンセットを読み込み、contentでアイコンを表示しています。font-sizeやmarginを調整して使用していただければと思います。

HTML

<a href="https://into-the-program.com/" target="_blank">https://into-the-program.com/</a>

CSS

a[target="_blank"]:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    font-size: .8rem;
    content: "\f35d";
    margin: 0 0 0 5px;
}

実行結果

See the Pen target="_blank" Open new tab icon｜CSS by ryohei (@intotheprogram) on CodePen.

最後に

Font Awesomeは本当に無料で使用しても良いのか疑いたくなるレベルで高品質のアイコンが揃っています。本記事では別タブで開くアイコンのみを使用していますが、下記のページから様々なアイコンを検索して簡単にページに反映することができます。

https://fontawesome.com/v6.0/icons

今後も新しいアイコンが追加され、バージョンも上がっていくと思いますので、定期的にFont Awesomeのサイトを確認して最新のアイコンセットを活用していきましょう！

以上、target="_blank"の外部リンクに別タブで開くアイコンを表示する方法のご紹介でした！