【SANGO】モバイルのハンバーガーメニューにアイコンを追加する方法

はじめに

SANGOではスマホなどのモバイル画面では、左上の「≡」のアイコンをクリックするとメニューが表示されます。

そのときに、デフォルトではメニューの文字の左にアイコンがつきません。

トップページにはアイコンをつけているため、統一感を出すためにアイコンを追加しました。

変更内容としては以下みたいな感じです。

ハンバーガーメニューにアイコンを追加

アイコンを追加するにはCSSの編集が必要です。

CSSはWordPressの画面で[外観]⇒[カスタマイズ]⇒[追加CSS]で編集できます。

CSSで以下のコードを書くことによりアイコンを表示できます。contentで使いたいアイコンのコードを指定します。

.drawer__content .widget_nav_menu .widgettitle:before {
      content: "\f07b";
	  font-weight: 900;
	  padding-right: 5px;
}

.drawer__content .my_popular_posts .widgettitle:before {
      content: "\f201";
	  font-weight: 900;
	  padding-right: 5px;
}

.drawer__content .widget_tag_cloud .widgettitle:before {
      content: "\f02c";
	  font-weight: 900;
	  padding-right: 5px;

}

アイコンはFontAwesome5を使用するので、公式サイトからコードを調べてください。

参考

Font Awesome

公式サイトで使いたいアイコンを検索して、以下画像の赤丸部分にコードが記載されています。これをCSSに書きます。

おわりに

無事にアイコンをつけることができました。

トップページにはアイコンがあるのに、ハンバーガーメニューにはアイコンが無く統一感が無かったのでアイコンをつけました。

あまり、ブログサイトの装飾にこだわっても意味はないですが、個人的には満足できました。