before content で設定したアイコン 文字が化ける


スポンサーリンク

before content で設定したアイコン 文字が化けることって結構あります。

前のところではでていたのになんで?

かなりイラつきます。

答えは結構簡単なこと。


before content は効いているのか?


何か化けて表示されているというのは、とりあえず before は効いているということになります。

google chrome を使っている場合(というか使った方が html や css 、 javascript のデバッグの時に楽だぉ)
デベロッパーツールで化けている文字を選択してみます。


要素選択モードに切り替えます。


特殊文字を出している部分を選択します。


フォントファミリーを設定してあります。


このフォントファミリーを設定せずに before content で フォント依存文字を使うと化けてしまう。

before content の解説では、ほとんどがテーマ依存した状態なので いきなり特殊文字を書き込んでも表示されますが、何かしらの理由でフォントを取り込んで使っている場合、明示的にフォントファミリーを指定しないと before content で文字化けを起こします。

before content で設定したアイコン 文字が化ける場合の対策まとめ


気が付いてしまえば、大したことじゃないんですが、気が付くまでは結構はまります。

明示的な宣言は、結構大事。お気を付けください。

スポンサーリンク