【THE THOR】ウイジェット カテゴリーで使われているアイコンを変更する

アイキャッチ画像 THE THOR(ザ・トール)
スポンサーリンク

WordPressテーマ THE THOR

別ブログのZMASAa.blogは、WordPressテーマ THE THOR(ザ・トール)を使って構築しています。

ZMASAa.blog│購入品やイベントなどの記事を掲載するmasaaのWordPressブログサイト③
購入品やイベントなどの記事を掲載するmasaaのWordPressブログサイト③

WordPressテーマ THE THOR(ザ・トール)の「ウイジェット カテゴリーで使われているアイコン」に関するカスタマイズについてまとめてみました。

WordPressテーマ THE THOR ウイジェット カテゴリーで使われているアイコン

現在の「ウイジェット カテゴリーで使われているアイコン」は下記のようになっています。

【THE THOR】ウイジェット カテゴリー/ナビゲーションメニューのカスタマイズ3

親カテゴリー、子カテゴリー共に丸いアイコンが使われています。

ZMASAa.blogはWebアイコンフォント Font Awesome 5を導入しているので、アイコンを変更してみました。

ウイジェット カテゴリーで使われているアイコンのカスタマイズ

「ウイジェット カテゴリーで使われているアイコン」のカスタマイズを行います。

カスタマイズ内容

「ウイジェット カテゴリーで使われているアイコン」のカスタマイズは、下記の通りです。

このカスタマイズ内容をthe-thor-childフォルダ内の「スタイルシート(style-user.css)」に追記します。

/************************************
** ■ウイジェット カテゴリーのアイコンのカスタマイズ
************************************/
.l-sidebar .widget.widget_categories ul li a:before,
.menuBtn .widget.widget_categories ul li a:before {
	font-family: "Font Awesome 5 Free";/*FontAwesome 5に設定*/
	content: "\f65d"; /*親カテゴリのアイコン*/
	color: #fff; /*アイコンカラー*/
	font-size: 15px;
	font-weight: 900;
}
.l-sidebar .widget.widget_categories ul li .children li a:before,
.menuBtn .widget.widget_categories ul li .children li a:before {
	font-family: "Font Awesome 5 Free"; /*FontAwesome 5に設定*/
	content: "\f65e"; /*子カテゴリのアイコン*/
	color: #fe619a; /*アイコンカラー*/
	font-size: 17px;
	font-weight: 900;
}

カスタマイズ後のウイジェット カテゴリーで使われているアイコン

今回のカスタマイズによって、WordPressテーマ THE THOR(ザ・トール)の「ウイジェット カテゴリーで使われているアイコン」の表示は、下記の様になりました。

【THE THOR】ウイジェット カテゴリーで使われているアイコンを変更する

今回のカスタマイズ内容は、Webアイコンフォント Font Awesome 5のフォルダ型のアイコンを親カテゴリー、子カテゴリーそれぞれに採用してみました。

最後に

単純に丸いアイコンよりは、少し変わったアイコンの方が楽しい気分になれるでしょう。

Webアイコンフォント Font Awesome 5には多くのアイコンがラインナップされているので、自分の好きなアイコンを使えるのは良いと思います。

Webアイコンフォント Font Awesome 5の設定方法については、前回のエントリー記事「Font Awesome 5.9.0以降を使うためにアカウント登録を行う!」でご確認することができます。

Font Awesome 5.9.0以降を使うためにアカウント登録を行う!
Webアイコンフォント Font Awesomeのバージョン5.9.0 からアカウント登録を行う必要が発生しました。そこでFont Awesomeのバージョン5.9.0 以降で使うため、アカウント登録の手順についてまとめてみました。

コメント