自作プラグイン/fa.inc.php の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• 自作プラグイン/fa.inc.php へ行く。
• 自作プラグイン/fa.inc.php の差分を削除

#author("2021-09-19T13:00:16+09:00","","")
#author("2021-09-19T13:02:10+09:00","","")
** fa.inc.php [#wf941441]
|RIGHT:100|LEFT:360|c
|~サマリ|Font Awesomeのアイコンを表示するプラグイン|
|~リビジョン|1.4|
|~対応バージョン|1.5.3|
|~投稿者|[[kanateko]]|
|~投稿日|&new{2021-09-19 (日) 12:54:47};|
フリー版Font Awesome 5 (v5.15.3) のアイコンを表示するプラグインです。サイズ変更やアニメーションなどFont Awesome側で用意された様々なオプションを使用できます。アイコンやオプションの指定は、公式ドキュメントに沿ったクラス名での指定か、それらを簡易化した引数での指定が可能です。

公式ドキュメント：https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use

**ダウンロード & インストール [#o1f1e4a0]
必要ファイルのダウンロードとインストール手順については以下のページを参照してください。

https://jpngamerswiki.com/?bde73f7df7

詳しい使い方や表示例なども掲載しています。

**プラグインの仕様 [#s10186aa]
-フリー版Font Awesome 5で表示可能なアイコンを使用できる
--Solid、Regular、Brandsが使用可能
-アイコンの指定には公式準拠のクラス名、もしくはそれを簡略化した引数を使用する
-Font Awesomeのオプションを設定可能 (SVG + JS系のオプションを除く)
-2つのアイコンを重ねて表示できる
-color、background、text-shadowといったスタイルを指定可能

**使用方法 [#j960310a]
アイコン指定時にSolid、Regular、Brand、いずれかのスタイルを引数で指定する必要がありますが、表示するアイコンがSolidスタイルの場合は指定を省略できます。

-ベーシック
 &fa([オプション]){クラス or アイコン名};

-リストにアイコンを使用する場合
 -&fa(li[,オプション]){クラス or アイコン名};リストの内容

-2つのアイコンを重ねる場合
 &fa(stack[,オプション]){&fa(1 or 2[,オプション]){クラス or アイコン名};&fa(1 or 2[,オプション]){クラス or アイコン名};};

アイコンを重ねる場合の記述はやや煩雑ですが、配布ページの使用例を見ていただけると理解しやすいかと思います。

***オプション [#qbe76dcf]
このページでは例を提示できず説明が難しいため、配布ページで実際の表示を確認することをオススメします。~
ここでは引数での指定方法を中心に公式ドキュメントと同じ順番で紹介します。

:アイコンスタイル|
それぞれ3通りの指定方法があります。Solidの場合は省略可。
--solid, fas, s
--regular, far, r
--brands, fab, b
 // 使用例
 &fa(r){heart};

:サイズ指定|
--xs, sm, lg, 2x, 3x, ... 9x, 10x
 // 使用例
 &fa(2x){tree};

:固定幅表示|
--fw
 // 使用例
 &fa(fw){building};

:リスト化|
リストとして表示する文章の先頭にliオプションを指定した本プラグインを設置します。
--li
 // 使用例
 --&fa(li){check-square};円の代わりにチェックボックスを表示

:回転と反転|
--90, 180, 270, horizontal, vertical, both
 // 使用例
 &fa(180){chess-knight};

:アニメーション|
--spin, pulse
 // 使用例
 &fa(pulse){spinner};

:ボーダーとフロート|
--border, left, right
 // 使用例
 &fa(right,border){pencil-alt};rightを指定した場合は右側に。borderを指定するとアイコンに枠が表示されます。
 &fa(right,border){pencil-alt};rightを指定した場合はアイコンを右側にフロート表示します。borderを指定するとアイコンに枠が表示されます。

:2つのアイコンを重ねて表示|
引数でstackを指定すると、アイコンの代わりにコンテナを作成し、その中で指定されたアイコン2つを重ねて表示します。コンテナの方で他のオプションを指定した場合、両方のアイコンにオプションが反映されます。&br;
アイコンは後に指定された方が上に表示されます。重ねるアイコンのうち、大きく表示する方の引数に '2' を、小さく表示する方には '1' を指定してください。 また、 'inverse' を指定すると色を反転させて表示することができます。
--(関連する引数) stack, 1, 2, inverse
 // 使用例
  &fa(stack){&fa(2,color=skyblue){square};&fa(1,inverse,b){twitter};};

:その他装飾|
--color=xxx
--text-shadow=xxx
--background=xxx

**ライセンス [#q3e02c08]
GPL v3