Highlife.Tokyo

  • Affiliate
  • Web
  • Business
  • LifeStyle
  • Other

STINGER6のメニュー横にアイコンを設置する方法

   

STINGER6のメニュー横にアイコンを設置する方法

WordPressのテーマで「STINGER6」を利用している方は、とても簡単な方法でメニューの横にアイコンを設置することができます。

メニューの横にアイコンを設置すると、ユーザビリティが向上しますし見栄えもよくなります。

今回ご紹介するのは、header.phpやスタイルシートをいじらなくてもできるとても簡単な方法ですので参考にして頂けたら幸いです。

アイコンを設置する方法

いじる場所はWordPressの 外観 >メニュー でアイコンを設置したいメニューを選択します。

STINGER6のメニュー横にアイコンを設置する方法

例えば、「プロフィール」というメニューの横にアイコンを設置したいとします。↓デフォルトはこんな感じだと思います。
STINGER6のメニュー横にアイコンを設置する方法

そして、ナビゲーションラベルを <span class=”fa fa-user”>プロフィール</span>のように書き換えます。

「fa fa-user」の部分は表示するアイコンのコードです。説明は後ほど。

STINGER6のメニュー横にアイコンを設置する方法

書き換えたら「メニューを保存」すれば完成。メニューの横にアイコンが表示されているはずです。STINGER6のメニュー横にアイコンを設置する方法

アイコンの選び方

今回利用したのは「 Font Awesome Icons 」というSTINGER6にはデフォルトで導入されているアイコンです。

Font Awesome Icons の中から好きなアイコンを選択して先ほどの 「fa fa-user」 の部分を書き換えれば良いだけです。

STINGER6のメニュー横にアイコンを設置する方法

画像のように自転車のアイコンに設置したい場合は 「fa fa-bicycle」 となります。

STINGER6のメニュー横にアイコンを設置する方法Font Awesome Icons は色々な箇所で使えるのでとても便利です。

STINGER6のメニュー横にアイコンを設置する方法、是非お試し下さい。

アフィリエイト ブログランキングへ

  こちらの記事も人気です