【Cocoon】サイドバーウィジェットのタイトルにFontAwesomeアイコンをつけるCSSカスタマイズ

Cocoonカスタマイズ

こんにちは。

今回は今一番イケてるWordPressテーマ「Cocoon」の、サイドバーウィジェットのタイトルにFontAwesomeアイコンをつけるCSSカスタマイズ方法をご紹介します。

スポンサーリンク

CSSサンプル

小テーマのstyle.css内に記述してくださいね。

/* ウィジェットタイトルにFAアイコン */
.widget h3::before { font-family: FontAwesome; font-size: 80%; vertical-align: middle; font-weight: normal; margin-right: 5px; } /* 共通設定 */
.widget_links h3::before { content: '\f0c1'; } /* リンク */
.widget_popular_entries h3::before { content: '\f135'; } /* 人気記事 */
.widget_new_entries h3::before, .widget_recent_entries h3::before { content: '\f005'; } /* 新着記事 */
.widget_categories h3::before { content: '\f115'; } /* カテゴリー */
.widget_rss h3::before { content: '\f143'; } .widget_rss h3 img { display: none; } /* RSSフィード */
.widget_tag_cloud h3::before { content: '\f292'; } /* タグクラウド */
.widget_search h3::before { content: '\f002'; } /* 検索 */
.widget_meta h3::before { content: '\f085'; } /* メタ */
.widget_fb_like_box h3::before { content: '\f082'; } /* Faceboxボックス */
.widget_facebook_page_like h3::before { content: '\f082'; } /* Faceboxバルーン */
.widget_item_ranking h3::before { content: '\f091'; } /* ランキング */
.widget_calendar h3::before { content: '\f073'; } /* カレンダー */
.widget_recent_comments h3::before { content: '\f0e6'; } /* 新着コメント */

もし変更したいアイコンがあればFontAwesomeアイコン検索のページからお好みのを探してきてcontntのところを改変してみてくださいね。

FontAwesomeのアイコンについては下記記事にもまとめてあります。

ブロガー・Web制作者必見。ブログデザインに使えるFont Awesomeアイコン 利用シーン別まとめ
こんにちは、さいとう(@S41T0H)です。 Font Awesome(フォントオーサム)、使ってますか? めちゃくちゃ便利ですよね。僕は大好きです。 Cocoonを始めWordPressのテーマには標準で読み込まれているものも多く、そ...

全ウィジェットを表示させたデモページはこちら

いかがだっただろうか

一応これで一通りのウィジェットタイトルにアイコンが付くと思うのですが、もし対応していないのがあれば教えてくださいね。

では。

【支援お待ちしております!】

当サイトが役に立ったと思ったら投げ銭サービスpolcaで支援していただけたら幸いです!(300円単位での投げ銭が可能です)

継続的な更新・サポートのためにご支援お願いいたします……!

▶支援先:サイトに掲載するCSSカスタマイズの支援をお待ちしています!

サイトに掲載するCSSカスタマイズの支援をお待ちしています! - polca(ポルカ)
"今後の記事執筆の励みになります!"を支援のおかえしとして受け取ることができます。

その他のカスタマイズは下記ボタンから。

コメント