Font Awesome がうまく表示できない場合の対応（Font Awesome 5・疑似要素指定）

ブログのテーマ更新にともなって、細かいカスタマイズを行っています。

アイコンフォントのFont Awesome 5 を使ったところ、一部のフォントが表示ができないという現象がありました。

ネット上の知見に助けられて、現在では表示できるようになりましたが、ググって古い情報（Font Awesome 4）を参照してしまうとハマる可能性があるので（私です😂）念のためにここにも対応を記しておきます。

現象

CSS の疑似要素で Font Awesome 5 を指定しても、一部のフォントで表示されない（表示されるフォントもある）

最初の設定

.read-more a:after {
	font-family: "FontAwesome";
	content: "\f2f6";
}

トーフ（□）しか表示されません😥

ググったところ、font-weight の指定が必要だそうです。

.read-more a:after {
	font-family: "FontAwesome";
	font-weight: 900;
	content: "\f2f6";
}

これでもトーフ（□）しか表示されません😭

もう少し調べたところ正解がありました、font-family の設定が間違っていたようです。

正解

.read-more a:after {
	font-family: "Font Awesome 5";
	font-weight: 900;
	content: "\f2f6";
}

ググった情報はよく読んで、内容を理解した上で使用しましょう＞私😅

以下のサイトが詳しいです。ありがとうございました。

https://analogstd.com/pc/font-awesome-5/

最近の投稿です

2025年1月17日 : 麺類

焼きそば調理法でつくるマルちゃん正麺醤油味の焼きラーメン

マルちゃん正麺の焼きそばは、インスタント麺をお湯で茹でるときにソースを一緒に入れ ...

2025年1月14日 : 麺類

マルちゃん正麺・焼きそば

インスタントでありながら生麺に限りなく近いおいしさの「マルちゃん正麺」シリーズに ...

2025年1月12日 : 野菜

シャトルシェフでつくる白菜と舞茸の豚汁

シャトルシェフの保温調理で、白菜と舞茸を入れた豚汁をつくりました。 材料 豚バラ ...

2025年1月9日 : 野菜

のせておいしい挽肉と白菜のオイスターソース炒め

挽肉と白菜の炒めものです。 味付けにはオイスターソース、ナンプラー、ニンニク、唐 ...

2025年1月4日 : 魚介

おせちもいいけどカレーもね！2025・簡単鯖缶カレー

サバの水煮缶と市販のカレールーを使って、簡単にできるフィッシュカレーをつくりまし ...