Font Awesome 5で、ブログ記事本文の別窓リンク(target=”_blank”を指定しているリンク)の後ろにCSSの疑似要素でウェブフォントを適用させる時にハマったのでメモ。

Font Awesome 5のexternal-link-altをCSSの疑似要素で適用させようとしたわけです。

結果、下記のCSS記述サンプルで問題なく表示できます。

.entry-content p a[target="_blank"]:after {
  content: "\f35d";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 100%;
  margin: 5px;
}

上記のCSSサンプルですが、.entry-content内のpタグ内でさらにaのアンカータグが付いていてさらにさらにtarget="_blank"を指定している場合は:afterにFont Awesome 5のf35dを表示するよ、という内容です。

注意点①:font-family

まず、font-familyFont Awesome 5 Freeじゃないとダメ。
Font Awesome 4系はFontAwesomeですが、Font Awesome 5系は、しかも無料版(Proじゃないやつ)はFont Awesome 5 Freeです。

注意点②:font-weight

これです。
Font Awesome 5のexternal-link-altは、font-weight: 900;じゃないと表示されませんでした。
これでハマってあちこち調べて時間を無駄にしてしまった。
どうやら、Font Awesome 5のSolid(fas)はfont-weight: 900;限定?のようです。
さり気なく「Styles & Prefixes」のページに説明がありました…。

参考

こちらの記事に救われました。


コメントを投稿する

* が付いている項目は必須です。