Font Awesomeは、手軽に使えるウェブアイコンフォントとして利用されており、このブログのテーマでも利用しています。
で、このFont Awesomeは、ブログの記事中にも使用できるのですが、通常の利用方法で使用するには以下の手順が必要です。
- linkタグでFont Awesomeのスタイルシートを読み込む
- <i class="fa fa-book"></i>みたいなタグを書いて使う(ちなみにこれ )
ちょっと面倒ですね。
1は、最初に設定してしまえばOKです。けれども2のタグを書くだけでもかなり面倒です。それに、どんなアイコンがあるかいちいちFont Awesomeサイトに行って調べなければなりません。
で、何かいい方法がないかとプラグインを探したらFont Awesome Iconsという、Font Awesomeのフォントを手軽に文中に使えるプラグインを見つけたのでご紹介です。
目次
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エディター上に次のようになボタンが現れます。
ボタンをクリックすると、以下のようなコンボボックスが表示されるので、コンボボックスからアイコンを確認しながら使うことができます。
以下のように、絞り込み検索も出来るので、使いたいアイコンを素早く発見する事もできます。
入力されたFont Awesomeのアイコンはビジュアルエディター上で以下のように表示されます。
視覚的に、どのように見えるのか分るのは使いやすいです。
まとめ
Font Awesome Iconsを使うことで手軽に記事中にウェブアイコンフォントを使うことが出来るようになります。
記事中に、ちょっとしたワンポイントとしてアイコンフォントを利用したい場合は、便利だと思います
わいひらさん、はじめまして^^
最近、教科書を一冊購入してWPでブログをはじめた初心者です
ちょっとややこしいことを順序立てて記事で説明したりするときに
webフォントという演出があれば
見易くて伝わりやすい内容になりそうだと考えました
こちらの記事のご紹介の通り、プラグインの2種
Font Awesome IconsとTinyMCE Advancedを入れてみました
しかし、エディター内のメディアを追加の右隣にiconsボタンが表示されません。。。
TinyMCE Advancedの設定では、フォントサイズが変更できる機能を追加したのみでしたがきっとなにか設定が足りてないですね
英語表記なので尻込みしています
お助けいただけるとありがたいです(泣