AGP Font Awesome Collectionプラグインで記事中にアイコンフォントを簡単に

WordPressのブログ記事本文中にアイコンフォントを使いたくて、簡単に利用できるプラグインはないかと使ってみたプラグイン「AGP Font Awesome Collection」の紹介です。ここのブログではないですが、Windows系の記事を書いていると、スタートボタンやWindows10予約アイコンなどの説明をする時にこのアイコンフォントを使いたかったのです。よく漢字の田んぼを利用して「田」マークをクリックして〜とか説明することが多いアレです。WordPressならではプラグインで簡単に利用することができました。

このページの目次

プラグインAGP Font Awesome Collection

現行のWP4.3.1と互換性があって、4000+の有効化数となかなかの人気があるプラグインのようです。アイコンフォントは、現行のFont Awesome 4.4.0を使うことができます。詳細はプラグイン公式ページをご覧ください。

WordPress.org

AGP Font Awesome Collection

https://wordpress.org/plugins/agp-font-awesome-collection

インストールと有効化

管理画面のプラグイン新規追加で「AGP Font Awesome Collection」で検索してインスト−ル、有効化。いつもの手順です。

基本操作

アイコンフォントを記事中に入れるのは簡単です。プラグインが有効になっていると、ビジュアルモードにFAボタンが増えているので、クリックしてSimple iconの中から好きなアイコンを選ぶだけです。フォントカラーやフォントサイズもオプションで選べます。

ElementからSimple Iconを選択 — ElementsからSimple Iconを選択

ショートコードが挿入される

記事中にこんなショートコードが挿入されました。

[fac_icon icon="windows" color="#1e73be" color_hover="#4687bf" font_size="24px"]

実際にはこのアイコンが表示されます。

フォントサイズとカラーを変更してみました。

Font Awesomeのタグも使えます

Font Awesomeのいろいろなタグも使えるようです。コチラを参考にアイコンを回転させてみました。

Font Awesome｜Example
http://fortawesome.github.io/Font-Awesome/examples/

[fac_icon icon="windows"]

ショートコードのココに追加で fa-spinをこのように追加します。

[fac_icon icon="windows fa-spin"]

そうすると、アイコンが回転します。インパクト大ですが、実際に利用することはあるでしょうか。

そもそも論

Font Awesomeアイコンを有効にするためのプラグインと割り切って考えれば、テキストモードでFont Awesomeのタグをそのまま入力すればいいだけですね。上記Font Awesome公式ページの例をそのままテキストモードで入れてみました。

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

fa-lg fa-2x fa-3x fa-4x fa-5x

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>

<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera

fa-ban on fa-camera

アイコン2つを重ねるのは、表示が崩れています。複雑なのは手を出すのはやめておきます。

テキスト付やボタンも

simple icon以外にも、テキスト付きアイコンや、アイコン付きボタンも作成できます。

こんなテキスト付きアイコンやこんなアイコン付きボタンを作れます

よく使うショートコードを登録

管理画面のダッシュボード左サイドに「 AGP Icons」が出ているので、ココからよく使うショートコードを登録しておくことが出来ます。だいたい好んで使うアイコンは絞られるので、事前に登録しておけば簡単に呼び出せます。

スライダーやウィジェットも

ショートコードやスライダーを登録しておいて、ウィジェットに表示させたりもできるようです。いろいろ応用が効きそうな機能が豊富ですね。今回は私が実際に使ってみて理解できた、さわりの部分だけのご紹介でした。