[Masahiko Abe]

Font Awesome 5対応方法について教えてください。
アップデートの変更点で下記の記載がありましたが、「若干のコード変更」方法がよく分からず詰まっています。
> FontAwesome5 対応（アイコンフォントから、js描画に変更になります。メニュー等に追加されている方は、若干コードの変更が必要です）

具体的には箇条書きの行頭文字を以下のCSSで変更していたのですが、font-familyを変更しても文字化けしてしまっています。
js描画ということで、この方法では駄目なのであろうことまでは理解したのですが、どう対応したらよいものかわからず、教えていただけると助かります。
よろしくお願いします。

♥ 0

Who liked: No user

[Masahiko Abe]

CSSを挿入し忘れました。

ul li:before {
/*  font-family: 'FontAwesome'; */
  font-family: "Font Awesome 5 Free";
  content: "\f00c";/*アイコン種類*/
  position: absolute;
  left : 0.5em; /*左端からのアイコンまで*/
   /*アイコン色*/
  color: #3B5998;
}

♥ 0

Who liked: No user

[Masahiko Abe]

調べた結果、独自にFontAwesome 5をCSSを読み込んで使えるようにトライしています。
子テーマにCSS読み込みのタグを書こうと思うのですが、Snow Monkeyの構造をきちんと理解できていないため、どのファイルに書けば良いかよくわかっておらず。
ヘッダにコードを追加したい場合のファイル、方法を教えていただけますか。

♥ 0

Who liked: No user

[Masahiko Abe]

たびたびすみません。CSSについては’@import’でstyle.cssに読み込めばよかったですね。
すみません。基本でした。
テーマと別に別途CSSを設定しなくてもよいのであれば教えていただけますか。

♥ 0

Who liked: No user

[キタジマ タカシ]

「若干のコード変更」は <i class="fa〜 で指定する方法のことを指していました！描画になったので、CSS で content を指定する方法についてはもう少し複雑になります。子テーマに js ファイルを追加して、下記のようなコードを足すことで実現できます。

jQuery(function($) {
  // 本当はセレクタは .entry__content > ul > li とかが良いかも
  $('ul il').prepend($('<i class="fas fa-angle-right" />'));
});

before を指定するわけではなく i タグを突っ込んでいるので多少 CSS で位置調整が必要かと思います。

もし js 版ではなく CSS 版をお使いになりたい場合は、子テーマの functions.php で指定して読み込ませたほうが良いかと思います（ @import は低速になることが多いようです）。

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style(
        'fontawesome5',
        'https://use.fontawesome.com/releases/v5.0.10/css/all.css'
    );
} );

ただ、Snow Monkey が js 版を読み込んでいるので、同時に CSS 版を読み込んだときにどういう不具合がおきるのかおきないのかはちょっとわかりません。なるべくは最初の js で対応する方法が推奨ではあります。

♥ 0

Who liked: No user

[Masahiko Abe]

ありがとうございます。
@importの方法は速度が気になっていたので勉強になりました。
‘font-weight: bold;’を指定しないと表示されないなどにはまったものの、CSS版でも今のところ問題なく動いています。ただ、まずはjs版を使う方法を試してみます。

♥ 0

Who liked: No user

[投稿者]

投稿