WordPressテーマ THE THOR(ザ・トール)
別ブログのZMASAa.blogは、WordPressテーマ THE THOR(ザ・トール)を使って構築しています。
![](https://wp.masaa.net/wp-content/uploads/2019/06/ogp_zmasaablog2.jpg)
今回は、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を使うためには、事前に登録、設定を行う必要があります。
![](https://masaa.net/wp-content/uploads/2019/04/eyecatch_fontawesome--320x180.png)
![](https://masaa.net/wp-content/uploads/2019/04/eyecatch_fontawesome--320x180.png)
カスタマイズ内容
「ヘッダーのアイコン」のカスタマイズの内容は、下記の通りです。
「スタイルシート(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化していきたいと思います。
コメント