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 032

: 野菜

圧力鍋でとろとろ白菜カレー

たっぷりの白菜をととろとろに煮込んだカレーです。 圧力鍋を使えば、白菜ととろとろ ...
Thumbnail of new posts 116

:

脂身と玉ねぎが甘い豚バラ丼

豚バラ肉の脂身の甘みと、玉ねぎの甘みが特徴の豚バラ丼です。味付けにはダシダと生姜 ...
Thumbnail of new posts 147

: 麺類

カニカマの天ぷら蕎麦

たぶんそのまま食べるのが一番おいしいであろうカニカマですが、これはイケそうだと感 ...
Thumbnail of new posts 176

: パスタ

残念だった😔イワシつみれのトマトソースパスタ

市販のミートボールやハンバーグを使うとおいしいパスタができます。 今回は、つみれ ...
Thumbnail of new posts 169

:

香味ねぎダレでいただく鶏唐揚げ

長ねぎに醤油、酢、砂糖、ニンニク、生姜、ごま油を合わせたねぎダレでいただく鶏の唐 ...

このブログへのアクセスについて

  • 2555今日の閲覧数:
  • 2407今日の訪問者数:
  • 3312昨日の閲覧数:
  • 3040昨日の訪問者数:
  • 7833今月の閲覧数:
  • 6現在オンライン中の人数:

1,592ビュー

Tec系PC

Posted by movinow