このブログでは、アイコンフォントのFont Awesomeを多用しているのですが、CSSで表示させようとすると文字化けして□になることがあります。(私だけなのかもしれませんが…)
そんな時に試したことです。私の場合は、普通に表示されるようになりました。
Contents
CSSで表示させる場合の例
管理人はいつもこちらのサイトを参考にさせて頂いておりまして、かなりお世話になってます。(ありがたや……)
それによると「bomb」というアイコンのSolid Style(このアイコンの場合は無料)の使い方は…
HTML
<p>これは<span class="bomb">爆弾</span>です。<p>
CSS
.bomb:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: '\f1e2';
}
となりまして、表示は…
これは爆弾です。
となるはずですが、実際は…
これは爆弾です。
と文字化けしてしまいます。(何故だ……?)
表示するためには
font-familyを"Font Awesome 5 Pro"にすることで何故か表示されるようになります。
管理人はPro版も使用したいので課金しているのですが、そのせいでしょうか?(サイトのどこかに書いてあるのかな?)
まとめ
Font Awesomeの無料版アイコンをCSSで使用する場合、
font-familyを"Font Awesome 5 Free"ではなく"Font Awesome 5 Pro"
とすると表示されるようになることがあります。
今回は以上です。