【jQuery】外部リンクに自動でFont Awesomeアイコンを表示する方法

外部リンク(新しいウィンドウで開くリンク)に自動で外部リンク用のアイコンを表示する方法を紹介。

コーディング中の画面と自然光

直接HTMLに書き込むこともできますが、その都度コードを打ち込むのは面倒ですしスマートではないですよね。そこで、今回はjQueryを利用して[target=’_blank’]の入っているリンクに自動で付与するように実装してみます。

外部リンクに自動でアイコンを表示する方法

下記はFont Awesomeのアイコンを表示するサンプルになります。もちろん、Font Awesomeの部分を画像にしても問題ありません。

HTML
<a href="/" target="_blank">外部リンク</a>
Script
$(function(){
	$("a[target='_blank']").addClass("new_window");
});
CSS
a.new_window::after {
	font-family: "Font Awesome 5 Free";
	content: '\f35d';
	padding-left: 0.3rem;
	padding-right: 0.3rem;
	font-size: 0.8rem;
	font-weight: bold;
}

jQueryの属性セレクター [attribute=’value’]は、指定した属性名(attribute)と値(value)の文字列が全く同じ場合に要素を選択します。

LINK:jQuery入門 – 属性セレクター [attribute=’value’]

今回の場合は “target” 属性、かつ属性値が “_blank” の場合に要素を選択して、.addClass() で “new_window” というクラスを追加。CSSで追加されたクラス「.new_window」の疑似要素にアイコンを指定します。

参考サイト:jQuery で外部リンクに自動でアイコンを表示する

こんな記事も読まれてます

この記事が気に入ったら
「いいね!」しよう

この記事が気に入ったら
「いいね!」しよう

最新情報をお届けします

コメント