【THE THOR】ヘッダーのアイコンのカスタマイズ

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

WordPressテーマ THE THOR(ザ・トール)

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

ZMASAa.blog│masaaの物欲心や愛車トヨタノア80系など日常の事について語るWordPressブログサイト③
購入品やイベントなどの記事を掲載するmasaaのWordPressブログサイト③

今回は、WordPressテーマ THE THOR(ザ・トール)での「ヘッダーのアイコン」のカスタマイズについてまとめてみました。

WordPressテーマ THE THOR(ザ・トール) ヘッダーのアイコン

現在のWordPressテーマ THE THOR(ザ・トール)の「ヘッダーのアイコン」は次の様になっています。

【THE THOR】ヘッダーのアイコンのカスタマイズ

特に問題の無いデフォルトの「ヘッダーのアイコン」です。

ZMASAa.blogは、THE THOR(ザ・トール)の既存のアイコンに対し、Webアイコンフォント Font Awesome 5化を進めているので、この「ヘッダーのアイコン」もWebアイコンフォント Font Awesome 5に変更したみたいと思います。

ヘッダーのアイコンのカスタマイズ

WordPressテーマ THE THOR(ザ・トール)での「ヘッダーのアイコン」のカスタマイズを行います。

Webアイコンフォント Font Awesome 5

なお、今回使用するアイコンは、Font Awesome 5になります。

WordPressテーマ THE THOR(ザ・トール)でFont Awesome 5を使うためには、事前に登録、設定を行う必要があります。

Webアイコンフォント Font Awesomeを使う!
WordPressテーマ THE THOR(ザ・トール)とCocoonで、Font Awesomeの利用についてまとめてみました。このWebアイコンフォントをメニューや項目の先頭に表示させてブログをより一層見やすくさせると良いでしょう!
Font Awesome 5.9.0以降を使うためにアカウント登録を行う!
Webアイコンフォント Font Awesomeのバージョン5.9.0 からアカウント登録を行う必要が発生しました。そこでFont Awesomeのバージョン5.9.0 以降で使うため、アカウント登録の手順についてまとめてみました。

カスタマイズ内容

「ヘッダーのアイコン」のカスタマイズの内容は、下記の通りです。

「スタイルシート(style-user.css)」を開き、今回のカスタマイズ内容を追記します。

/************************************
** ■ヘッダーのアイコン変更
************************************/
.t-headerCenter .searchBtn__link:before { /*ヘッダーのサーチアイコン*/
	font-family: "Font Awesome 5 Brands";/*Font Awesome 5に設定*/
	content: "\f3eb"; /*アイコン*/
	color: #fff; /*アイコンカラー*/
	font-size: 24px; /*フォントサイズ*/
	font-weight: 400; /*フォント太さ*/
}

.t-headerColor.t-headerCenter .menuBtn__link:before { /*ヘッダーのメニューアイコン*/
	font-family: "Font Awesome 5 Free";/*Font Awesome 5に設定*/
	content: "\f142"; /*アイコン*/
	color: #fff; /*アイコンカラー*/
	font-size: 24px; /*フォントサイズ*/
	font-weight: 900; /*フォント太さ*/
}

カスタマイズ後のヘッダーのアイコン

今回のカスタマイズによって、「ヘッダーのアイコン」は次の様になりました。

【THE THOR】ヘッダーのアイコンのカスタマイズ

今回のカスタマイズでは、「ヘッダーのアイコン」をFont Awesome 5のアイコンに変更してみました。

最後に

これでまた一つアイコンをWebアイコンフォント Font Awesome 5化されました。

今後も既存のアイコンは、Webアイコンフォント Font Awesome 5化していきたいと思います。

コメント