Font Awesomeのアイコンが四角になった問題の件

Font Awesome って便利ですよね。
素敵なアイコンが選んでポンで使えます。

このワードプレスのテーマ「stingerplus2」もカテゴリーメニューの矢印とかSNSとかのマークに一部使われてるんですが。

ある日見たら□になってる!? どうやらFont Awesomeが5にバージョンアップしたそうです。

あれぇ?ってな訳で直し方。

テーマのカスタマイズ > CSSの追加に 以下を加えます。

#side li.cat-item::after {
content: " \f105";
font-family: 'Font Awesome 5 Free';
font-weight: bold;
}

.fa, .far, .fas {
font-family: "Font Awesome 5 Brands";
}

ブランド系マーク(ツイッターとかFacebookとか)はフォントファミリーが違うので注意。

矢印はfont-weight: bold;が要るらしいです。

どうでしょう直りましたかな?

と、思ったらラインの吹き出しが今度は消えてるwwラインの吹き出しはブランドマークじゃ無いのねww

[sns-top.php]と[sns.php]ファイルのラインボタンのアイコン指定部分を"fab fa-line"に変更すればOK

<!--LINEボタン-->   
<i class="fab fa-line" aria-hidden="true"></i>

コメントを残す

メールアドレスが公開されることはありません。