WordPressの投稿にFont Awesomeのアイコンフォントを使いたかったら「WP Visual Icon Fonts」が最も手軽

Font Awesome, the iconic font and CSS toolkit

Font Awesomeのアイコンフォントは、ブログデザインなどにワンポイントとして使用するととても便利です。

このブログで使用しているテーマでも、所々使用しています。こんな感じで。

パンくずリスト 投稿日、更新日

Font Awesomeは、テーマなどで使用されているのはよく見ますが、記事の本文中に利用しても、なかなか便利に使えるのではないかと思います。

そう思って以前、Wordpressの投稿にFont Awesomeを簡単に使えるようにするFont Awesome Icons+TinyMCEプラグインの組み合わせを紹介しました。けれど、TinyMCEの仕様変更か何かで、Wordpressのビジュアルエディターから使用できなくなってしまいました。(詳しくはFont Awesome Iconsのフォーラムに書かれています)

そこで、代替手段を探したら先述の組み合わせよりさらに楽に使用できる「WP Visual Icon Fonts」というプラグインを見つけたので紹介します。

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

WP Visual Icon Fontsプラグイン

WP Visual Icon Fonts

WP Visual Icon Fontsは、Font AwesomeGenericonsのウェブアイコンフォントを、Wordpressのビジュアルエディター上から手軽に使えるようにするプラグインです。

fa-cover2 gen-cover2

インストール

WP Visual Icon Fontsは、インストールするだけで特に設定も必要ありません。

プラグインを検索して

プラグインの検索

インストールして有効化するだけ。

インストール

エディター画面

アイコンフォントを使用するときも、打ち込みが面倒くさい、タグやショートコードを使う必要もなく、エディターのドロップダウンメニューから選択するだけで簡単にいろいろなアイコンを使用することができます。

ドロップダウンメニューから選択

使用方法

インストール後、Wordpressの新規投稿画面などを表示させると「icons」のようなボタンが表示されます。これをクリックします。

icons

するとこんな感じでドロップダウンメニューが表示されるので▼部分をクリックしてドロップダウンして

ドロップダウンメニュー

アイコンを選択します。

♪アイコンを選択

すると、こんな感じでアイコンフォントが表示されます。

挿入されたアイコンフォント

HTMLタグはこんな感じで自動的に挿入されます。

<i class="fa fa-music"><span style="color: transparent; display: none;">icon-music</span></i>

ドロップダウンの検索ボックスを使用すれば、絞り込みも簡単です。

Twitterアイコンの絞り込み

どんなアイコンがあるかは、Font Awesome IconsGenericonsを見ながら探すと楽だと思います。

まとめ

WP Visual Icon Fontsを使うと、本文中にちょっとしたワンポイント入れたいときに、なかなか便利なのではないかと思います

デフォルトの状態で、アイコンフォントの左右に半角スペースが入るようになっているので、文字とアイコンがくっついたりすることもないですよ

『WordPressの投稿にFont Awesomeのアイコンフォントを使いたかったら「WP Visual Icon Fonts」が最も手軽』へのコメント

  1. 名前:sally 投稿日:2014/08/27(水) 23:56:10 ID:b17b75c95

    わいひらさん
    記事にまとめていただきありがとうございました^^

    し・か・し
    ここでまた新たな問題が発生(泣
    下書き保存していた記事を編集していてなんか変!だと思いました
    エディターをビジュアルに切り替えたり、編集を加えて下書き保存等の変化を与えたら勝手にPタグで括られてしまいました
    しかも、文中に適度な改行を加えて書いていたものが無効となり
    だらだらと長い1文としてまとまってしまっています
    なぜでしょうか。。。

    このPタグ問題に悩むケースはググったらいろいろ出てきましたが
    わたしが参考にさせていただいている教科書付録のテーマ(現在使用中)には
    もともとこの問題を回避するコードが対策として書いてあるようです
    だから、現在までストレスなく普通に使えていたわけですが・・・
    それで、とりあえずWP Visual Icon Fontsを無効化してみたのですが
    この現象が改善しません(泣

    おかしい現象をまとめると、
    ①テキストエディタ上で改行するとその1行に対して勝手にPタグで括られてしまう
    ②テキストエディタ上で改行すると自動でbrタグが入っていたのに無効になってしまっている
    以上です

    なにか解決策はあるでしょうか(滝汗

  2. アバター画像 名前:わいひら 投稿日:2014/08/28(木) 10:38:50 ID:e0d3bfeea

    とりあえず、それらの挙動はWP Visual Icon Fontsをインストールしたからではないと思います。
    もしそれがインストール後改行が変になったとしても、削除して元に戻らないということはないはずなので。
    でも一応、FTPでプラグインフォルダの削除を確認しておいたほうがいいかもしれません。

    > しかも、文中に適度な改行を加えて書いていたものが無効となり
    > だらだらと長い1文としてまとまってしまっています
    これは、僕の環境でもたまにあります。
    ですので「公開」ボタンを押すときは必ずビジュアルエディターに切り替えてから押すようにしています。
    リビジョン機能で元には戻せますけど一応そのようにしています。

    > ①テキストエディタ上で改行するとその1行に対して勝手にPタグで括られてしまう
    > ②テキストエディタ上で改行すると自動でbrタグが入っていたのに無効になってしまっている
    >なにか解決策はあるでしょうか(滝汗
    これがWordpress本来の仕様なので、僕はこういうものだと思って使っています。
    現在使用されているテーマに、回避コードが書いてあるとのことですが
    そのテーマ自体がどんなものかわからないと、僕には何ともできないです。

    一応改行を入れるプラグインなどもあります。
    ただ自分が思っていた動作と違ったので、使用はしませんでした。
    http://sonoyama.org/3033.html
    その他に、Wordpressのテーマでコードを変更する方法などがあると思いますが、
    失敗するとWordpressが動作しなくなるので、PHP編集に慣れてない場合はあまりお勧めではありません。

  3. 名前:sally 投稿日:2014/08/28(木) 15:10:24 ID:de965f778

    わいひらさま

    ご返事ありがとうございます
    アドバイスを受けて、初心者が迂闊にPHPファイルをいじるものではないと痛感しております
    焦っていろいろ手をつけてしまい・・・
    なにがなんだか分からなくなったところで、今回の問題については

    ・今後は、ビジュアルエディター内のみで記事を書くこと
    ・br改行したいときは、shift+enter
    ・Pタグ改行したいときは、enter

    ・・・このスタイルで記事を書くことにしました@@

    基本的なことの理解をつける必要があると思いますので
    もう一冊PHPを理解できる教科書を投入して努力したいと思います

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

  4. アバター画像 名前:わいひら 投稿日:2014/08/28(木) 16:54:20 ID:e0d3bfeea

    >アドバイスを受けて、初心者が迂闊にPHPファイルをいじるものではないと痛感しております
    >焦っていろいろ手をつけてしまい・・・
    僕も最終よくやりました。テーマを再インストールする羽目になったことも。

    >・今後は、ビジュアルエディター内のみで記事を書くこと
    >・br改行したいときは、shift+enter
    >・Pタグ改行したいときは、enter
    この方法が一番良策だと思います。
    結局、プラグインを使用して改行できるようになっても
    今度は、そのプラグインに何か不具合があった場合でも
    アンインストールできなくなってしまうので。

    僕も、Wordpressの使い始めのときは何度か改行を無効化されて
    涙目で直したことが何度もあるので、最初は一度は通る道なのかもしれません。
    (その頃は、リビジョンの使い方すら知りませんでした)

    あとビジュアルエディタも使い勝手はいいですが、
    Windowsの場合はWindows Live Writer(無料)。
    Macの場合は、MarsEditというブログエディターを使用すると、
    かなり記事作成がはかどりますよ。