WordPressのTwentyNineteenでFontAwesomeを使おうと思ったら、「表示されない…」という現象が起きました。
色々と試して解決したのですが、その対処法について今回は共有したいと思います。
原因は２つ
今回の対処法の前提条件として、新バージョンであるFontAwesome5.0での表示されない場合です。
そのFontAwesomeが表示されない原因として、2つあります。
ひとつが、「Webフォントとして導入しているパターン」
もうひとつが、「SVG方式で導入しているパターン」です。
それぞれ導入している方式によって対処法が異なりますので、1つずつ解説していきます。
Webフォントとして導入している場合
FontAwesomeをWebフォントとして導入しているというのは、<head></head>に以下のコードを追記した場合を指しています。
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
この場合でかつ、<i></i>というようにHTMLに入力した場合にうまくアイコンが表示されず文字化けしている状態でした。
表示されない原因と対処法
Webフォントとして導入している場合に表示されない原因は、親テーマのfont-family設定にあります。
親テーマのfont-familyの設定はこのようになっています。
font-family:-apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, "Helvetica Neue", sans-serif !important;
最後に「!important」がついているため、FontAwesomeの設定が適用されずにうまく表示されません。
これを対処するためには、以下のコードをstyle.cssに追記してください。
html[lang="ja"] .fas{
font-family:Font Awesome\ 5 Free !important;
}
このコードを追記することによって、FontAwesomeのアイコンの設定が適用されるようなコードになっています。
SVG方式で導入している場合
私の場合は、SVG方式で導入している場合で、before等の疑似要素に使用したケースでうまく表示されませんでした。
文字化けをして何をどうやってもアイコンが表示されないという状態でした。
表示されない原因と対処法
SVG方式の場合は、疑似要素での使用について非推奨のようです。
どうしても使いたいのであれば、一定の手順を行うと使えるかもということで公式サイトに書かれていますが、やり方が下手なのか、うまくいきませんでした。
公式サイトにＳＶＧ方式の場合における疑似要素の使い方が書かれているので、各自試してみて下さい。
疑似要素で使用したい場合で、ＳＶＧ方式にこだわりがないがない場合は、「Webフォント方式」での使用をおすすめします。
まとめ
FontAwesomeをTwentyNineteenで使用する場合は、今のところWebフォントでの使用がおすすめです～
