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/

新着記事

Thumbnail of new posts 105

: 麺類

マルちゃんZUBAAAN! 濃厚味噌・旨辛タンメン

食べた瞬間、脳と心に響く! この味濃さ。風味。食べ応え。 お家にいながらにして” ...
Thumbnail of new posts 127

: ご飯・丼

焼き肉のタレのチャーハン

焼き肉ジュージューといえば子供の頃の家族団らんの思い出か、付き合いの外食ばかりで ...
Thumbnail of new posts 171

: ご飯・丼

シシトウのカレー

先日「まるごとピーマンのカレー」をつくりましたが、今回は具材として「シシトウがメ ...
Thumbnail of new posts 130

: 麺類

豆腐とひき肉の汁なし辛ラーメン

木綿豆腐とひき肉を炒め合わせて、汁なしでつくった辛ラーメンにあわせてみました。 ...
Thumbnail of new posts 180

: ご飯・丼

岩下の新生姜と紅生姜のW生姜チャーハン

岩下の新生姜と紅生姜を使った、生姜のチャーハンです。 材料 岩下の新生姜20g紅 ...

統計情報

  • 10
  • 8
  • 305
  • 241

1,852ビュー

Tec系PC

Posted by movinow