先日スマホ版の見出しアイコンがおかしくなっていました。
本来は「Font Awesome」を使った✔️が期待なのですが、何故か四角にバッテン・・・
ネットで調べると同様の解説がたくさんあり、今回は「font family名が正しく設定されていない」とのことでした。
以下のように、"Font Awesome"と書くだけではNGで、例えば無料で使うアイコンなら正しい名前"Font Awesome 5 Free"と書く必要があるもよう。
before
.entry-content h5:before{
font-family: FontAwesome;
/*アイコンユニコード*/
content: "\f00c";
/*アイコン色*/
color: #3f3f3f;
position: absolute;
font-size: 1em;
left: 0;
top: 0;
After(対処後)
.entry-content h5:before{
font-family: "Font Awesome 5 Free";
/*アイコンユニコード*/
content: "\f00c";
/*アイコン色*/
color: #3f3f3f;
position: absolute;
font-size: 1em;
left: 0;
top: 0;
アイコンの方も無事戻り、めでたしめでたし。
PC版の状態は良くみるのですが、８～９割はスマホ側アクセスが主流なのでスマホ版のチェックの方を厚めにしないとあかんですなぁ。
