Webtools

【Font Awesome】無料版アイコンが表示されない時に試したこと #52

2021年6月5日

ソニーストア

このブログでは、アイコンフォントのFont Awesomeを多用しているのですが、CSSで表示させようとすると文字化けして□になることがあります。(私だけなのかもしれませんが…)

そんな時に試したことです。私の場合は、普通に表示されるようになりました。

CSSで表示させる場合の例

管理人はいつもこちらのサイトを参考にさせて頂いておりまして、かなりお世話になってます。(ありがたや……)

サルワカ:【保存版】Font Awesomeの使い方

それによると「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"
とすると表示されるようになることがあります。

今回は以上です。

ソニーストア

MIZUNO SHOP ミズノ公式オンラインショップ

-Webtools

© 2021 Memorandum. All Rights reserved. POWERED by HONDA