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

INDEX

WordPressテーマ THE THOR
1. WordPressテーマ THE THOR ウイジェットカテゴリーで使われているアイコン
ウイジェットカテゴリーで使われているアイコンのカスタマイズ
1. カスタマイズ内容
2. カスタマイズ後のウイジェットカテゴリーで使われているアイコン
最後に

WordPressテーマ THE THOR

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

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト

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

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

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

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

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;
}