Font Awesomeで特定の文字のみ、文字化けする(表示されない)場合の対処法

2020年12月20日

Font Awesome(フォントオーサム)って便利ですよね。このブログでも使っています。

ですが、利用の際にバグに悩まされる方も多いのではないでしょうか。僕もそんな1人です。

こんにちわ、きみひこです。

Font Awesomeであるあるなバグと言えばFont Awesomeのバージョンごとに微妙に記述の仕方が違っていて、それで文字化けが起きたりすることだと思います。

ですが今回の記事はそれとは違います。特定のアイコン指定のみ、文字化け(表示されない)する話です。

今まできちんとアイコンが表示されてたんだけど、今回のアイコンに限って表示されない…なんだこれ?

といった内容です。

特定の文字だけ、、という症状だけに正直、相当悩むかと思いますが、、

理由は謎ですが解決方法が分かりましたので他にお悩みの方の参考になるかなと思い、書いておきます。

特定の文字のみ表示されない場合の解決方法

このブログで使っているアイコンで、このバグを再現できるものがあるので、実際にやってみます。

2020-12-19_23h31_40

上記を見てください。リストの見出しの部分のチェックマークはfont awesomeで出しています。

cssでfont-weight:600;がかかっている点に注目してください。(この600という数値は、bold指定に相当します)

メモfont-weightでは文字の太さを100~900の9段階で指定できます。100が最も細く、900が最も太くという指定です。

2020-12-19_23h33_14

font-weight:500にすると、どうでしょう。

ひろ
ひろ
消えた

はい、チェックマークが消えましたね( ◜ᴗ◝)
きみひこ
きみひこ

つまり、これが答えです。

どういうわけか、font-weight:600以上の指定をしないと、アイコンが表示されないんですね。このチェックマークアイコンの場合。

600の部分は数値では無くて、bold指定でも大丈夫です。

これはもう単なるバグなんだろうなぁと思いつつ、とりあえず困ってる方の参考になりましたら幸いです。

ほかにも複数のアイコンでこの症状が発生するようです。

もし特定のアイコンのみ表示されない!ってことであればこのバグ?を疑ってくださいね。

この記事は役に立ちましたか? 役立った 役立たなかった
0 人中 0 人がこの記事は役に立ったと言っています。

★新記事下ハイブリッドads