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

2018.08.21 2019.02.15 HP制作

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

FontAwesome

直接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 で外部リンクに自動でアイコンを表示する
Related Posts