Font Awesome で提供されているアイコンをテーマ内で利用できるようになります。

機能を有効にすると Font Awesome のフォントを CDN で読み込む link style タグを html head タグ内へ出力します。

どんな感じに表示されるの？

↑の先頭に というのがありますよね？ こんな感じで文中にアイコンを挿入出来るようになっています。

 基本的な使い方

使えるアイコンの一覧は下記のページにあります。

Font Awesome

薄いグレーで表示されているものは利用できないので、それ以外で任意のアイコンを選んでクリックしてください。

左側のメニューの【 FREE 】をクリックすると、利用できるアイコンの一覧が表示されます。

詳細ページで

<i class="fas fa-align-justify"></i>

この部分をコピーします。

これを挿入したいページの編集画面でテキストモードで貼り付けます。ビジュアルモードで貼り付けてもタグがそのまま表示されますので注意してください！

<p><i class="fas fa-file-alt"></i>サンプル<p>

WEBフォントアイコンなので色や大きさの変更が画像と違って、とても簡単にできます。

 アイコンの色を変更する

<p><span style="color: #ff0000;"><i class="far fa-hand-point-right"></i></span> サンプル<p>

class による変更が可能な方はclassを追加して、CSS 指定してください。

 アイコンの大きさを変更する

大きさを変えるには、class 内に以下のようにコードを追加します。

<p><i class="far fa-hand-point-right fa-3x"></i></i>サンプル<p>

<i class="far fa-hand-point-right fa-xs"></i>
<i class="far fa-hand-point-right fa-sm"></i>
<i class="far fa-hand-point-right fa-lg"></i>
<i class="far fa-hand-point-right fa-2x"></i>
<i class="far fa-hand-point-right fa-3x"></i>
<i class="far fa-hand-point-right fa-5x"></i>
<i class="far fa-hand-point-right fa-7x"></i>
<i class="far fa-hand-point-right fa-10x"></i>

<p><i class="far fa-hand-point-right fa-lg"></i></i>サンプル<p> <p><i class="far fa-hand-point-right fa-2x"></i></i>サンプル<p> <p><i class="far fa-hand-point-right fa-3x"></i></i>サンプル<p> <p><i class="far fa-hand-point-right fa-4x"></i></i>サンプル<p> <p><i class="far fa-hand-point-right fa-5x"></i></i>サンプル<p>

画像ではないので CSS で自由な大きさ（文字サイズ）を指定することもできます。

 アイコンを回転させる

アイコンを回転させることもできます。注目させたいところに使うとより目立ちますね。

<p><i class="far fa-hand-point-right fa-spin"></i></i>サンプル<p>

うまく使えばアクセントになるアイコンフォントですが、使いすぎには注意です！

シンプルでカスタマイズしやすいWordPressテーマ

※このエリアは多機能プラグイン「VK All in One Expansion Unit」で一括挿入しています。投稿タイプ毎または記事毎に表示内容を変更する事も可能です。

Lightningは twitter Bootstrap ベースのシンプルでカスタマイズしやすいWordPressテーマです。
プラグイン VK All in One Expansion Unit とセットで使う事でビジネスサイトにもブログにも活用できます。

詳しくはこちら