記事の本文中にウェブアイコンフォントを使用できるWordPressプラグイン「Font Awesome Icons」

Font Awesome Icons

Font Awesomeは、手軽に使えるウェブアイコンフォントとして利用されており、このブログのテーマでも利用しています。

で、このFont Awesomeは、ブログの記事中にも使用できるのですが、通常の利用方法で使用するには以下の手順が必要です。

  1. linkタグでFont Awesomeのスタイルシートを読み込む
  2. <i class="fa fa-book"></i>みたいなタグを書いて使う(ちなみにこれ icon-book

ちょっと面倒ですね。

1は、最初に設定してしまえばOKです。けれども2のタグを書くだけでもかなり面倒です。それに、どんなアイコンがあるかいちいちFont Awesomeサイトに行って調べなければなりません。

で、何かいい方法がないかとプラグインを探したらFont Awesome Iconsという、Font Awesomeのフォントを手軽に文中に使えるプラグインを見つけたのでご紹介です。

スポンサーリンク
レクタングル(大)広告

Font Awesome Iconsプラグインとは

Font Awesome Iconsプラグイン

Font Awesome Iconsは、Wordpressのエディター上から手軽にFont Awesomeを使うためのプラグインです。

このプラグインをインストールした時点で、Font Awesomeのスタイルシートが読み込まれるので、linkタグなどで呼び出す必要はなくなります。

また、TinyMCEを併せてインストールすることで、Wordpressエディター上から手軽にアイコンを選ぶことができます。

Font Awesome Iconsの使い方

Font Awesomeアイコンを利用するには、以下の方法があります。

普通にHTMLタグを書く

Font Awesome Examplesにあるような、HTMLタグもそのまま使えます。使えるアイコンは、The Iconsで確認することができます。

Pencil icon

<i class="icon-pencil"></i>

Phone icon

<i class="icon-phone"></i>

Chevron left icon

<i class="icon-chevron-left"></i>

ショートコードを使って書く

[icon name=name-of-icon]というような書式を使って、Font Awesomeを使うこともできます。

[icon name=icon-pencil] Pencil icon

[icon name=icon-pencil]


[icon name=icon-phone] Phone icon

[icon name=icon-phone]


[icon name=icon-chevron-left] Chevron left icon

<[icon name=icon-chevron-left]

TinyMCEプラグインを使って挿入する

追記(2014/8/27):
なんか数ヶ月前からTinyMCEでは、ドロップダウンが表示されなくなっているようです。Font Awesome Iconsのサポートフォーラムに以下のような投稿がありました。

WordPressのエディターから、Font Awesomeを利用する代替手段としてWP Visual Icon Fontsの利用をお勧めします。

これだと僕の環境では、TinyMCEなしで以下で書かれているのと同様にFont Awesomeアイコンのドロップダウンが表示されました。

TinyMCEプラグインと併せて使用すると、Wordpressエディター上に次のようになボタンが現れます。

Iconsボタン

ボタンをクリックすると、以下のようなコンボボックスが表示されるので、コンボボックスからアイコンを確認しながら使うことができます。

Font Awesome Iconsコンボボックス

以下のように、絞り込み検索も出来るので、使いたいアイコンを素早く発見する事もできます。

Font Awesomeコンボボックスで検索も出来る

入力されたFont Awesomeのアイコンはビジュアルエディター上で以下のように表示されます。

ビジュアルエディター上での表示

視覚的に、どのように見えるのか分るのは使いやすいです。

まとめ

Font Awesome Iconsを使うことで手軽に記事中にウェブアイコンフォントを使うことが出来るようになります。

記事中に、ちょっとしたワンポイントとしてアイコンフォントを利用したい場合は、便利だと思います icon-heart

『記事の本文中にウェブアイコンフォントを使用できるWordPressプラグイン「Font Awesome Icons」』へのコメント

  1. 名前:sally 投稿日:2014/08/27(水) 00:06:21 ID:b17b75c95

    わいひらさん、はじめまして^^

    最近、教科書を一冊購入してWPでブログをはじめた初心者です
    ちょっとややこしいことを順序立てて記事で説明したりするときに
    webフォントという演出があれば
    見易くて伝わりやすい内容になりそうだと考えました

    こちらの記事のご紹介の通り、プラグインの2種
    Font Awesome IconsとTinyMCE Advancedを入れてみました
    しかし、エディター内のメディアを追加の右隣にiconsボタンが表示されません。。。
    TinyMCE Advancedの設定では、フォントサイズが変更できる機能を追加したのみでしたがきっとなにか設定が足りてないですね
    英語表記なので尻込みしています

    お助けいただけるとありがたいです(泣

  2. アバター画像 名前:わいひら 投稿日:2014/08/27(水) 08:22:25 ID:89a0a1bfb

    sallyさんはじめまして。

    なんか数ヶ月前からTinyMCEでは、ドロップダウンが表示されなくなっているようです。Font Awesome Iconsのサポートフォーラムに以下のような投稿がありました。

    Tinymce glyphs dropdown
    Using Icons in Menu

    WordPressのエディターから、Font Awesomeを利用する代替手段としてWP Visual Icon Fontsを利用するといいかもしれません。

    今朝ちょっと試しただけなんですが、WP Visual Icon Fontsだと、これをインストールするだけ、TinyMCEなしでFont Awesome Iconsと同様にビジュアルエディターにドロップダウンメニューが表示されました。

  3. 名前:sally 投稿日:2014/08/27(水) 11:24:37 ID:b17b75c95

    わいひらさん、おはようございます^^

    ご助言、本当に感謝です(泣
    今、試しにやってみたらiconsボタンが出現しました!
    好みのアイコンを選択後・・・
    プレビューで閲覧チェックしたらちゃんとブラウザー上に反映されております

    これで記事を書くモチベーションが大幅にアップしました

    本当にありがとうございました!

    今後ともこちらでお勉強させていただきます^^