WordPress-「Font Awesome 4 Menus」でナビゲーションメニューにアイコンフォントをつけよう


Font Awesome 4 Menusの使い方

流行のアイコンフォント、WordPressのナビゲーションメニューに挿入して見栄えよくしてみよう。
FontAwesome4Menus

Font Awesome 4 Menusのインストール

メニューの[プラグイン]-[新規追加]で「Font Awesome 4 Menus」を検索してインストール。

Awesome4Menus1


プライグインを有効化すると以下メッセージが出ます。
「Thank you for installing Font Awesome Menus 4 by New Nine! Want to see what else we’re up to? Subscribe below to our infrequent updates. You can unsubscribe at any time.」
更新情報をメールで受け取りますか?って事だと思いますので、受け取る場合は入力後Joinしましょう、自分はXで非表示しちゃいました。

Font Awesome 4 Menusの設定

インストールとプライグインの有効化が終わったら設定をしてみます。
[外観]-[メニュー]で表示されたページの右上部「表示オプション」をクリックして展開させます。
展開後「詳細メニュー設定を表示」の中の「CSSオプション」にチェックを入れる。

FontAwesome4Menus


続いてFont AwesomeのThe Iconsのページから使いたいアイコンを探します。
現在519のアイコンがあるので探すほうが大変そうですが・・・
検索とか使って探しましょう。

以下Homeアイコンを検索して設定する方法です。
Font-Awesome_icons


Font-Awesome_icons2


使いたいアイコンが見つかったらアイコンをクリックして詳細ページを表示。
詳細ページアイコン横にCssClassがあるのでコピーしましょう。
(今回の場合はfa-home)
Font-Awesome_icons3


[外観]-[メニュー]の「メニュー構造」の中身を見ると[CSS Class (オプション)]の項目が追加されているので、そこに使いたいアイコンフォントのCssClassを入力。
(今回の場合はfa-home)
Font-Awesome_icons4


入力したら保存を押して確認してみましょう。
FontAwesome0


残りのアイコンも設定して終わりです。
すごく簡単で見栄えも良くなりますね。


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL