別窓リンクに自動的にアイコンをつけたり、リストのアイコンをFontAwesomeのアイコンにしたりする際、擬似要素を設定すると思います。
下記のように、Font AwesomeをJSで読み込んだ場合、そのままでは擬似要素が使えません。
<script defer src="https://use.fontawesome.com/releases/latest/js/all.js"></script>
通常のCSS記述方法
CSSでFont Awesomeを読み込んだときは、特に設定なく使えます。
a[target="_blank"]::after {
display: inline-block;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 0.75rem;
content: "\f35d";
margin-left: 5px;
}
JSで読み込んだ場合のCSS記述方法
JSでFont Awesomeを読み込んだ場合は、設定を変更する必要があります。
擬似要素がオフになっているので、Font Awesomeを呼び出す <script>
要素に data-search-pseudo-elements
属性を追加します。
さらに、CSSで作成された擬似要素が表示されてしまうため、display:none;
を設定。
擬似要素に margin-left
を設定しても適用されないので、別ウインドウアイコン用のclass名に padding
を設定しました。
HTMLの記述
<head>
<script data-search-pseudo-elements defer src="https://use.fontawesome.com/releases/latest/js/all.js"></script>
</head>
CSSの記述
a[target="_blank"]::after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f35d";
font-size: 1rem;
}
/* jsで FontAwesome を読み込んだ場合 */
a[target="_blank"]::after { display: none; }
.fa-external-link-alt { padding-left: 4px; }
- SVG + JSフレームワークでのCSS疑似要素の使用(英語サイト)
CSS Pseudo-Elements | Font Awesome
最後に、擬似要素での使用は、FontAwesome公式サイトでは推奨されていません。
HTMLに手を加えることができない場合にのみ使うように書かれています。