サポート » テーマ » FontAwesome5.7.2において擬似要素のプロパティ値を反映させるためにはどうすれば良いでしょうか?

  • 解決済 echizenya

    (@echizenya)


    いつもお世話になっております。
    下記の質問についてご教示をお願いします。

    【質問の主旨】

    FontAwesome5.7.2のアイコンを使用すると、擬似要素のcoloerプロパティとpadding-rightプロパティが反映されません。現在のコードからどのように書き換えればプロパティの値が反映されるでしょうか?

    【質問の補足】

    上記の質問に対して下記3点を補足として説明します。

    1.
    下記の擬似要素に対してcoloerプロパティとpadding-rightプロパティを指定しているにも関わらず、
    色やサイズが反映されません。

    .kiji h2:before {
      position: absolute;
      left: 0px;
      top: 9px;
      display: none;
      font-family: 'Font Awesome 5 Solid';
      content: '\f14a';
      color: #000080;
      padding-right: 5px;
      font-size: 24px;
      line-height: 1;
    }

    https://github.com/echizenyayota/e-yota/blob/master/wp-content/themes/mytheme/style.css#L449-L460

    2.
    今回の質問は、「擬似要素のcontentプロパティとして使っているにも関わらず、FontAwesome5.7.2のアイコンが表示されないのはなぜでしょうか?」という質問の関連質問です。アイコンを表示させるためにFontAwesome5.7.2を使用しています。

    3.
    キャッシュの消去なども試みましたが、デフォルト設定から変わっていないような気がします。

    以上、ご確認のほどよろしくお願いします。

    ヘルプの必要なページ: [リンクを見るにはログイン]

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • ishitaka

    (@ishitaka)

    こんにちは

    実際に表示されるアイコンは、疑似要素(before)ではなく、スクリプトにより挿入された svg タグが表示される仕組みになっています。よってスタイルを変更する場合は、svg に対して指定する必要があります。なお、サイズはスクリプトによりスタイルが自動で追加されるので、そのスタイルより優先させる必要があります。追加されるスタイルはブラウザのデベロッパーツールなどで確認するといいかと思います。

    .kiji h2 svg {
      color: #000080;
    }
    トピック投稿者 echizenya

    (@echizenya)

    @ishitaka さん。
    いつもコメントありがとうございます。

    よってスタイルを変更する場合は、svg に対して指定する必要があります。

    下記のコードを記述すると意図通りの表示になりました。

    .kiji h2 svg {
      color: #000080;
    }
    
    .fa-check-square {
        padding-right: 15px;
    }

    的確なアドバイスをいただき助かりました。今後ともどうぞよろしくお願い申し上げます。

    (参考記事)
    https://e-yota.com/webservice/shikinido_possibility_exceeding_1_million_yen_fsa/
    (GitHub)
    https://github.com/echizenyayota/e-yota/blob/master/wp-content/themes/mytheme/style.css#L461-L467

    • この返信は5年前にechizenyaが編集しました。
2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「FontAwesome5.7.2において擬似要素のプロパティ値を反映させるためにはどうすれば良いでしょうか?」には新たに返信することはできません。