ワードプレス初心者です。
テーマはsimplicity2を使用しています。
ワードプレス4.9.1を利用中です。
子テーマのCSSにてh2見出しをカスタマイズする際に下記のようにアイコンを追加して下記のようにカスタマイズしました。(アイコンはFont Awesome 5を使用)
<追加したCSS>
.article h2 { position: relative;/*相対位置*/ padding: 0.5em 0.5em 0.5em 1.5em;/*アイコン分のスペース*/ line-height: 1.4;/*行高*/ color: #ff6a6a;/*文字色*/ border-top: dotted 1px gray; border-bottom: dotted 1px gray; background: #fffff4; } h2:before{ font-family: FontAwesome;/*忘れずに*/ content: "\f138";/*アイコンのユニコード*/ position: absolute;/*絶対位置*/ font-size: 1em;/*サイズ*/ left: 0.25em;/*アイコンの位置*/ top: 0.5em;/*アイコンの位置*/ color: #ff6a6a; /*アイコン色*/ }
すると、h2見出しは想定通りに表示されるのですが、アイコンだけがヘッダーの左上や、タグの左側に表示されてしまいます。
<アイコンのみ表示されてしまう箇所>
・ヘッダー画像の左上
・カテゴリが表示されている左側のスペース
・記事一覧の左上
そのアイコンをグーグルのディベロッパーツールを使用して確認しても特におかしなところは無いように思えます。
<ディベロッパーツールでアイコンにカーソルを当てた時にでる表示>
h2:before { font-family: FontAwesome; content: "\f138"; position: absolute; font-size: 1em; left: 0.25em; top: 0.5em; color: #ff6a6a; }
原因はなんのでしょうか?ご教授お願い致します。
回答1件
あなたの回答
tips
プレビュー