« ドメインについて | BLOGトップページ | SEOランキングファクター »

Font Awesomeの不具合

こんばんはばさっちです。
最近すごくお世話になっている「Font Awesome」ですが、beforeやafterで指定した時にアイコンがうまく表示されないことが多々あるんです。(実は今日も遭遇しまして...)

p::after {
font-family: "Font Awesome 5 Free";
content: "\f095";

例えばこのように指定すれば本来は電話のアイコンが表示されるはずなんですが...このままだと表示されません。

今まではhtmlに直接記述したりbefore、afterを使わないようにしていたのですが、根気よく調べていたら解決方法が有りましたのでご紹介します。
実は上記に「font-weight: bold;」を追加するだけでうまく表示することができるんです。

諦めずに調べてよかった!!!
これでもっと「Font Awesome」を使用する頻度が増えそうです。

アーカイブ