グローバルメニューにアイコンを表示させるプラグインがかわいい♡

wpカスタマイズ
小雪
小雪

こんにちは。上賀茂ブロガーの小雪(@kamigamolife)です。

 

今回はグローバルメニューアイコンに表示させるプラグインについて紹介します。

 

グローバルメニューにアイコンを表示させるプラグイン「font awesome 4 menus」を使用します。

スポンサーリンク

font awesome 4 menusをインストールします

ダッシュボードの「プラグイン」→「新規追加」にすすみます。

 

キーワードの窓にfont awesome 4 menusと記入します。

 

今すぐインストールをクリックします。

 

インストールが完了したら有効化をクリックします。

font awesomeのリストページにすすみます。

ダッシュボードの「設定」→「Font awesome」をクリックします。

 

右上のリンクclick here to visit the Font Awesome websiteをクリックします。

 

Font awesomeのWebページに進むと、アイコンリストになっています。
その中から使いたいアイコンを探します。

 

今回はtwiterのアイコンを表示させてみます。
アイコン検索窓にtwiter(使いたいアイコンを英単語で)と打ち込みます。

 

出来きたアイコンで好きなものの表示名をコピーしておきます。
メモ帳などにペーストしておくと便利です。

※Font awesomeの有料はいくら?
グレーになっているアイコンは有料プランに入ると使えるようです。
1年で60ドルです。日本円で6400円ほど(2018.4.12現在)

グローバルメニューにアイコンを表示させましょう

今回はツイッターのアイコンを表示させてみます。
こんな感じで。

 

ダッシュボードの「外観」→「メニュー」にすすみます。
編集するメニューはヘッダー(ヘッダーナビ)なので、そちらを選択します。

 

twiter初心者の項目を▼をクリックして開きます。
ナビゲーションラベルのtwiter初心者の前に
<i class=”fa fa-○○○”></i>

○○○の部分に先程コピーしておいたtwitter-squareをペーストします。
最終的にこんな形になります。
<i class=”fa fa-twitter-square”></i>twitter初心者

 

メニューを保存します。
自分のブログのグローバルメニューを確認して、思うようになっていたらOKです。

私の場合はこんな感じにしてみたかったので成功です♪

その他のFont awesome使用例

今回はグローバルナビにアイコンを表示させてみましたが、HPのどこででも使えそうです。
<i class=”fa fa-○○○”></i>○○○に使いたいアイコンの表示名を入れ込めば、記事本文やウィジェットにも使えます。

 

例えば

メールはこちら
topへ戻る
ご購入はこちら

タグはこんな感じです。
<i class=”fa fa-envelope”></i>メールはこちら
<i class=”fa fa-home”></i>topへ戻る
<i class=”fa fa-cart-arrow-down”></i>ご購入はこちら

Font awesomeって便利で可愛いですね♡

多様してしまいそうです♪

 

関連記事 Font awesome一覧。コピペでOK【無料アイコン版】作りました♡

 

小雪
小雪

 

では、またね。see ya٩( ᐛ )و

 

コメント

error:Content is protected !!
タイトルとURLをコピーしました