[WordPress] サイドバーウィジェットの先頭に FontAwesome を追加する

2019年4月2日ITWordPress

サイドバーウィジェットの先頭に FontAwesome を使って、チェックを追加してみました。

wordpress-add-fontawesome-to-sidebar-widget1.png

当サイトでは「Simplicity2」を使わせていただいているのですが、サイドバーウィジェットのタイトルには “sidebar_widget_title” クラスが当てられているのでそいつに FontAwesome の疑似要素を追加しました。

テーマ Simplicity2 直下の style.css に下記疑似要素を追加するだけで簡単に追加できます。

style.css

 .sidebar_widget_title::before {
   content:"\f00c";
   font-family:"FontAwesome";
   margin-right:0.5rem;
 }
 

before で sidebar_widget_title クラスが指定されている要素の前に、、
content で チェックマークを、、
fon-family を “FontAwesome”にして、、
margin-right でチェックマークとタイトルに1文字の半分の大きさのスペースを空けています。

参考:
CSSの疑似要素とは?beforeとafterの使い方まとめ

CSS3のremとemの違いについて

https://fontawesome.com/icons/check?style=solid

以上になります。

投稿一覧の投稿日時やタグには時計やフォルダなどが表示されているのにサイドバーウィジェットのタイトルには何も付いていなかったのが気になっていたんですよね〜

スポンサーリンク

Posted by nobuhiro harada