あらかじめ FontAwesome を読み込んでおきます。
外部リンクにアイコンを付ける
「子要素にimg要素を持っていない全ての外部リンク」に class名 .blank
を付与します。
CSS記述
/* 外部リンクにアイコンを付ける */
.post-content a.blank::after{
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f35d";
font-size: 1rem;
margin-left: 4px;
}
jQuery記述
$(function(){
// 画像を含まない外部リンクにアイコンを付ける
$('a[target="_blank"]:not(:has(>img))').addClass('blank');
});
アイコンを消すclass名を付ける方法
上記とは逆の方法です。
すべての外部リンクにアイコンを付けて、「画像を含む外部リンク」には class名 .remove-icon
を付与し、アイコンを削除しています。
CSS記述
/* 外部リンクにアイコンを付ける */
.post-content a[target="_blank"]::after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f35d";
font-size: 1rem;
margin-left: 4px;
}
/* 画像を含む外部リンクのアイコンを削除 */
.post-content a.remove-icon {
border:none;
}
.post-content a.remove-icon::after {
content: none;
}
jQuery記述
$(function(){
// 画像を含む外部リンクのアイコンを削除
$("a:has(img)").addClass("remove-icon");
});