WordPressテーマ THE THOR（ザ・トール）
別ブログのZMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。
今回は、WordPressテーマ THE THOR（ザ・トール）での「ヘッダーのアイコン」のカスタマイズについてまとめてみました。
WordPressテーマ THE THOR（ザ・トール） ヘッダーのアイコン
現在のWordPressテーマ 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を使うためには、事前に登録、設定を行う必要があります。
カスタマイズ内容
「ヘッダーのアイコン」のカスタマイズの内容は、下記の通りです。
「スタイルシート(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; /*フォント太さ*/
}
カスタマイズ後のヘッダーのアイコン
今回のカスタマイズによって、「ヘッダーのアイコン」は次の様になりました。
今回のカスタマイズでは、「ヘッダーのアイコン」をFont Awesome 5のアイコンに変更してみました。
最後に
これでまた一つアイコンをWebアイコンフォント Font Awesome 5化されました。
今後も既存のアイコンは、Webアイコンフォント Font Awesome 5化していきたいと思います。
コメント