Font Awesome 4 Menus「WordPressのメニューにアイコンを表示するプラグイン」

Font Awesome 4 Menusをインストールすると、簡単にWordPressのメニューにアイコンを表示することができる。
 このブログでは、こんな感じに表示させている。

アイコン付きメニュー

Font Awesome 4 Menus

Font Awesome 4 のアイコンをWordPressカスタムメニューの他、サイトの好きなところに表示できるようになります。プログラムの知識は必要ありません!

Font Awesome 4 Menus — WordPress Plugins

外観>メニューから設定するだけ

インストールが終わったら、外観>メニューに移動して、「表示オプション」から「CSSクラス」を表示させよう。

外観>メニュー>表示オプション

各メニューに表示される「CSS class (オプション)」にFont AwesomeのCSSクラスを入力すればOK!

メニュー>CSS class

欲しいアイコンを探すには

Font Awesomeで見つけよう!
 一覧からピックアップすることも、検索することも可能だ。

Font_Awesome_Icons

お目当のアイコンを見つけたら、表示されるCSSクラスをコピペすれば完了!

fa-heart-o__Font_Awesome_Icons

注意点をひとつだけ

そのままCSSクラスを入力すると、メニューが整頓されずに表示される場合がある。
 そんな時は「fa-fw」を追記することで、キレイに整頓させて表示させることができる。
 先ほどのアイコンを例にすると

fa-heart-o fa-fw

と入力していけばOK!

Mokaならウィジェットも

このブログで使用中のテーマMokaなら、独自のウィジェットのタイトル部分にアイコンを追加することもできる。
 先ほどのアイコンを例にすると、表示されている

<i class=”fa fa-heart-o” aria-hidden=”true”></i>

を、タイトル前に入力すればOK!

<i class=”fa fa-heart-o fa-fw” aria-hidden=”true”></i>About
Moka ウィジェット アイコン表示

殺風景とミニマルデザインの間を漂う、アンプラグドなブログだけれど、アイコンを表示させることで、多少のアクセントはつけられただろうか…
 お試しあれ!


Originally published at COCOLO CHRONICLE.