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

2015/10/04[公開] 2019/02/11[最終更新]

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

このページの目次

スポンサー リンク

プラグインAGP Font Awesome Collection

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

インストールと有効化

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

基本操作

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

ビジュアルモードで「FA」ボタンをクリック
ビジュアルモードで「FA」ボタンをクリック
ElementからSimple Iconを選択
ElementsからSimple Iconを選択
iconのプルダウンメニューから好きなアイコンを選びます。
iconのプルダウンメニューから好きなアイコンを選びます。
オプションでカラーやサイズを選んで、Insertをクリックします。
オプションでカラーやサイズを選んで、Insertをクリックします。

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

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

[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」が出ているので、ココからよく使うショートコードを登録しておくことが出来ます。だいたい好んで使うアイコンは絞られるので、事前に登録しておけば簡単に呼び出せます。

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

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

スポンサー リンク

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です