fa

faプラグイン

https://fontawesome.com/ のアイコンが使えます。
Font Awesome 6.x のクラスを指定します。

アイコンを WIKIWIKI でホスティングし、プラグインとして使えるようにしました。
WIKIWIKI で Font Awesome を使用するメリットには以下のようなものがあります。

• アイコンの転送量はわずか数KB
• 画像を用意しなくてもすぐに使える
• 簡単な記述でアニメーション効果を付けたりすることができる
• 表示サイズを大きくしても粗くならない

下記は現在のものです。Font Awesome のバージョンが上がると、できることが増えるかもしれません。

Font Awesomeとは？

Font Awesome は、多くのデザイナー、開発者、クリエーターが使用する、アイコンライブラリおよびツールキットです。

上記のようなWebでよく使われているアイコンを簡単に表示させることができます。

Font Awesome のアイコンはフォント(文字)として使うことができ、サイズを大きくしても滑らかに表示されます。
また表示だけではなく、サイズや色、アニメーションをつけたりカスタマイズすることも可能です。

基本書式

fa-solid, fa-regular, fa-brands のいずれかと、fa-* のアイコン名称を組み合わせます。pro シリーズのアイコンは利用できません。

&fa(fa-solid fa-icons);

Font Awesome 5.x 当時の名前も利用できるかもしれません。適当なものに置き換わります。

&fa(fas fa-icons);

ショートカット

https://fontawesome.com/search の HTML タグをそのまま貼り付けることもできます。
(将来のアイコン検索サイトの UI を永久に保証するものではありません)

&fa(<i class="fa-solid fa-icons fa-lg" style="color: #ff0000;"></i>);

スタイリング書式

色は基本的に文字色と同じになります。第2パラメータで異なる色を指定することもできます。

&fa(fas fa-icons, color:#ff0000;);
&fa(fas fa-icons, #ff0000);

第2パラメータは Font Awesome のマニュアルに登場する HTML の style 属性と互換性があります。color または --fa- で始まる特殊な変数を指定するのに利用します。簡略形式として、CSS スタイル書式でない場合には、色をひとつ指定したと解釈されます。

スタイリングオプション

各スタイリングクラスを追加できます。

&fa(fa-solid fa-icons fa-lg fa-flip-horizontal);

アイコンのサイズ変更

相対サイズ

アイコンの周囲のテキストや要素をまとめてサイズ調整し垂直方向に揃えます。

|CENTER:170|CENTER:100|c
|表示|クラス|h
|&fa(fa-brands fa-playstation fa-2xs, #0070D1); PlayStation|fa-2xs|
|&fa(fa-brands fa-playstation fa-xs, #0070D1); PlayStation|fa-xs|
|&fa(fa-brands fa-playstation fa-sm, #0070D1); PlayStation|fa-sm|
|&fa(fa-brands fa-playstation, #0070D1); PlayStation|なし|
|&fa(fa-brands fa-playstation fa-lg, #0070D1); PlayStation|fa-lg|
|&fa(fa-brands fa-playstation fa-xl, #0070D1); PlayStation|fa-xl|
|&fa(fa-brands fa-playstation fa-2xl, #0070D1); PlayStation|fa-2xl|

絶対サイズ

単純にアイコンのサイズを拡大するのに便利です。
クラス fa-1x ~ fa-10x までの 10段階のサイズが選べます。

//見やすいように改行を入れています。
&fa(fa-brands fa-discord fa-1x, #5865f2);
&fa(fa-brands fa-discord fa-2x, #5865f2);
&fa(fa-brands fa-discord fa-3x, #5865f2);
&fa(fa-brands fa-discord fa-4x, #5865f2);
&fa(fa-brands fa-discord fa-5x, #5865f2);
&fa(fa-brands fa-discord fa-6x, #5865f2);
&fa(fa-brands fa-discord fa-7x, #5865f2);
&fa(fa-brands fa-discord fa-8x, #5865f2);
&fa(fa-brands fa-discord fa-9x, #5865f2);
&fa(fa-brands fa-discord fa-10x, #5865f2);

回転、反転

|CENTER:55|CENTER:150||c
|表示|クラス|CENTER:説明|h
|&fa(fa-brands fa-twitter fa-3x, #1D9BF0);|なし|デフォルト|
|&fa(fa-brands fa-twitter fa-rotate-90 fa-3x, #1D9BF0);|fa-rotate-90|アイコンを 90° 回転|
|&fa(fa-brands fa-twitter fa-rotate-180 fa-3x, #1D9BF0);|fa-rotate-180|アイコンを 180° 回転|
|&fa(fa-brands fa-twitter fa-rotate-270 fa-3x, #1D9BF0);|fa-rotate-270|アイコンを 270° 回転|
|&fa(fa-brands fa-twitter fa-flip-horizontal fa-3x, #1D9BF0);|fa-flip-horizontal|アイコンを水平方向にミラーリング|
|&fa(fa-brands fa-twitter fa-flip-vertical fa-3x, #1D9BF0);|fa-flip-vertical|アイコンを垂直方向にミラーリング|
|&fa(fa-brands fa-twitter fa-flip-both fa-3x, #1D9BF0);|fa-flip-both|アイコンを 180° 回転|

より細かい角度の調節

• 第１パラメータに fa-rotate-by を含む
• 第２パラメータに --fa-rotate-angle: ...deg を含む

回転ユーティリティは CSS のtransform プロパティを利用します

|CENTER:55|CENTER:150||c
|表示|クラス|CENTER:第2パラメータ|h
|&fa(fa-brands fa-twitter fa-rotate-by fa-3x, --fa-rotate-angle: 19deg; color:#1D9BF0);|fa-rotate-by|--fa-rotate-angle: 19deg;|
|&fa(fa-brands fa-twitter fa-rotate-by fa-3x, --fa-rotate-angle: 80deg; color:#1D9BF0);|fa-rotate-by|--fa-rotate-angle: 80deg;|
|&fa(fa-brands fa-twitter fa-rotate-by fa-3x, --fa-rotate-angle: 55deg; color:#1D9BF0);|fa-rotate-by|--fa-rotate-angle: 55deg;|
|&fa(fa-brands fa-twitter fa-rotate-by fa-3x, --fa-rotate-angle: 60deg; color:#1D9BF0);|fa-rotate-by|--fa-rotate-angle: 60deg;|
|&fa(fa-brands fa-twitter fa-rotate-by fa-3x, --fa-rotate-angle: -0.25turn; color:#1D9BF0);|fa-rotate-by|--fa-rotate-angle: -0.25turn;|
|&fa(fa-brands fa-twitter fa-rotate-by fa-3x, --fa-rotate-angle: 3.142rad; color:#1D9BF0);|fa-rotate-by|-fa-rotate-angle: 3.142rad;|

アニメーション

ビート、フェード、ビートフェード、フリップ、スピンなどのアニメーションをアイコンに適用して、視覚的な関心を高めることができます。

• 光敏感性発作について
  点滅など、特定の視覚イメージを見たとき、光過敏てんかん発作を起こされる方がごくまれにいらっしゃいます。アニメーションの過度な使用を避け、ポイント的な使用に留めていただくことをお勧めいたします。

• ぐらつきについて
  アイコンがアニメーションすることで、高さや幅が動的に変わり、レイアウトがぐらつくことがあります。その際はアイコンのサイズを小さくしてみてください。

|CENTER:100|CENTER:130||c
|表示|クラス|アニメーション|h
|&fa(fa-brands fa-twitch fa-beat fa-3x, #a970ff);|fa-beat|ビート |
|&fa(fa-brands fa-twitch fa-fade fa-3x, #a970ff);|fa-fade|フェード|
|&fa(fa-brands fa-twitch fa-beat-fade fa-3x, #a970ff);|fa-beat-fade|ビートフェード|
|&fa(fa-brands fa-twitch fa-bounce fa-3x, #a970ff);|fa-bounce|バウンス|
|&fa(fa-brands fa-twitch fa-flip fa-3x, #a970ff);|fa-flip|フリップ|
|&fa(fa-brands fa-twitch fa-shake fa-3x, #a970ff);|fa-shake|シェイク|
|&fa(fa-brands fa-twitch fa-spin fa-3x, #a970ff);|fa-spin|スピン|
|&fa(fa-brands fa-twitch fa-spin fa-spin-reverse fa-3x, #a970ff);|fa-spin&br;fa-spin-reverse|スピン リバース|
|&fa(fa-brands fa-twitch fa-spin-pulse fa-3x, #a970ff);|fa-spin-pulse|スピン パルス|
|&fa(fa-brands fa-twitch fa-spin-pulse fa-spin-reverse fa-3x, #a970ff);|fa-spin-pulse&br;fa-spin-reverse|スピン パルス リバース|
||||

固定ピッチ幅

各アイコンの横幅は異なります。 fa-fw クラスで横幅をそろえることができます。

#flex_container(flex-start){{{
#flex_box{{
|~fa-fw クラスなし|
|&fa(fa-brands fa-grunt fa-3x, #e48632);&br;&fa(fa-brands fa-youtube fa-3x, #FF0000);&br;&fa(fa-brands fa-gulp fa-3x, #fa383e);&br;&fa(fa-brands fa-github fa-3x, #1f2328);|
}}
#flex_box{{
|~fa-fw クラスあり|
|&fa(fa-brands fa-grunt fa-fw fa-3x, #e48632);&br;&fa(fa-brands fa-youtube fa-fw fa-3x, #FF0000);&br;&fa(fa-brands fa-gulp fa-fw fa-3x, #fa383e);&br;&fa(fa-brands fa-github fa-fw fa-3x, #1f2328);|
}}
#flex_box{{
|~fa-fw クラスなし|
|&fa(fa-brands fa-grunt fa-3x, #e48632);&fa(fa-brands fa-youtube fa-3x, #FF0000);&fa(fa-brands fa-gulp fa-3x, #fa383e);&fa(fa-brands fa-github fa-3x, #1f2328);|
}}
#flex_box{{
|~fa-fw クラスあり|
|&fa(fa-brands fa-grunt fa-fw fa-3x, #e48632);&fa(fa-brands fa-youtube fa-fw fa-3x, #FF0000);&fa(fa-brands fa-gulp fa-fw fa-3x, #fa383e);&fa(fa-brands fa-github fa-fw fa-3x, #1f2328);|
}}
}}}

ボーダー

角丸の枠線でアイコンを囲みます。

|CENTER:202|CENTER:100|c
|表示|クラス|h
|&fa(fa-brands fa-jenkins fa-border fa-3x); &fa(fa-brands fa-safari fa-border fa-3x, #1D9BF0); &fa(fa-brands fa-evernote fa-border fa-3x, #00a82d);|fa-border|

高度なスタイリング

fa_ul / fa_li プラグイン

アイコンを箇条書きの先頭に付けることができます。箇条書きを fa_ul で囲み、fa と同じパラメータを取る fa_li を、各項目の最初の文字として記述します。

書式

#fa_ul{{
- &fa_li(fa-solid fa-check-square); 項目
- &fa_li(fa-regular fa-square); 項目
-- &fa_li(fa-solid fa-check-square); サブ項目
-- &fa_li(fa-regular fa-square); サブ項目
- &fa_li(fa-regular fa-square); 項目
}}

fa_li は fa と全く同じオプションを取るので、色付けやアニメーションも可能です。

結果

• 項目
• 項目
  • サブ項目
  • サブ項目
• 項目

fa_stack プラグイン

アイコンを重ね合わせて利用する、かなり応用的な機能です。以下の例は、それぞれの行が 1 アイコンになります。

書式

&fa_stack{&fa(fa-regular fa-square fa-stack-2x);&fa(fa-solid fa-plus fa-stack-1x);};

&fa_stack{&fa(fa-solid fa-square fa-stack-2x);&fa(fa-solid fa-plus fa-stack-1x fa-inverse);};

結果

fa_stack の中に書く fa には、fa-stack-1x もしくは fa-stack-2x を付けなければなりません。1x は文字サイズ、2x は倍の大きさになります。
2x で塗りつぶしたところに 1x で穴をあけるような重ねは、fa-inverse で反転させて重ねます。
fa_stack はパラメータに、Font Awesome のスタイリングクラスと色を取ることができます。

書式

&fa_stack(fa-4x,#75b1ff){&fa(fas fa-square fa-stack-2x);&fa(fab fa-twitter fa-stack-1x fa-inverse);};

結果

アニメーションとの応用

fa_stack と それぞれの fa でアニメーションを適用することができます。

&fa_stack(fa-bounce fa-2x,#75b1ff){&fa(fas fa-square fa-stack-2x fa-spin);&fa(fab fa-twitter fa-beat fa-stack-1x fa-inverse);};

使用例

WIKIWIKI.jp

• YouTube
• YouTube
• YouTube
• Twitter
• Twitter
• Twitter
• Discord

&color(#d33665){WIKIWIKI.jp};&fa(fa-solid fa-asterisk fa-spin fa-xs,#d33665);
&fa(fa-solid fa-star, #abad14);&fa(fa-solid fa-star, #abad14);&fa(fa-solid fa-star, #abad14);&fa(fa-solid fa-star-half-stroke, #abad14);&fa(fa-regular fa-star, #abad14);

#fa_ul{{
- &fa_li(fa-brands fa-youtube fa-fade fa-lg, #FF0000); [[YouTube>#]]
- &fa_li(fa-brands fa-youtube fa-lg, #FF0000); [[YouTube>#]]
- &fa_li(fa-brands fa-youtube fa-lg, #FF0000); [[YouTube>#]]
- &fa_li(fa-brands fa-twitter fa-lg, #1D9BF0); [[Twitter>#]]
- &fa_li(fa-brands fa-twitter fa-lg, #1D9BF0); [[Twitter>#]]
- &fa_li(fa-brands fa-twitter fa-lg, #1D9BF0); [[Twitter>#]]
- &fa_li(fa-brands fa-discord fa-lg, #5865f2); [[Discord>#]] &fa(fa-solid fa-n fa-beat fa-fw, #ff0000);&fa(fa-solid fa-e fa-beat fa-2xs, #ff0000);&fa(fa-solid fa-w fa-beat fa-2xs, #ff0000);&fa(fa-solid fa-exclamation fa-beat fa-2xs fa-fw, #ff0000);
}}



&fa(fa-solid fa-arrow-up fa-2x fa-fw, #9932cc);&fa(fa-solid fa-arrow-up fa-2x fa-fw, #9932cc);&fa(fa-solid fa-arrow-down fa-2x fa-fw, #9932cc);&fa(fa-solid fa-arrow-down fa-2x fa-fw, #9932cc);&fa(fa-solid fa-arrow-left fa-2x fa-fw, #9932cc);&fa(fa-solid fa-arrow-right fa-2x fa-fw, #9932cc);&fa(fa-solid fa-arrow-left fa-2x fa-fw, #9932cc);&fa(fa-solid fa-arrow-right fa-2x fa-fw, #9932cc);&fa(fa-solid fa-b fa-2x fa-fw, #9932cc);&fa(fa-solid fa-a fa-2x fa-fw, #9932cc);

&fa(fa-solid fa-arrow-down fa-2x fa-fw, #9932cc);&fa(fa-solid fa-arrow-right fa-rotate-by fa-2x fa-fw, --fa-rotate-angle: 45deg; color:#9932cc);&fa(fa-solid fa-arrow-right fa-2x fa-fw, #9932cc);&fa(fa-solid fa-plus fa-2x fa-fw, #9932cc);&fa(fa-solid fa-hand-fist fa-2x fa-fw, #9932cc);


CENTER:&fa_stack(fa-2x,#ffd700){&fa(fa-solid fa-diamond fa-stack-2x); &fa(fa-solid fa-person-digging fa-stack-1x,#000000);};
CENTER:このページは編集中です。
&br;
CENTER:&fa(fa-solid fa-user-check fa-2x fa-fw, #008000);&fa(fa-solid fa-comment-sms fa-2x, #008000);
CENTER:SMS認証が必要なページです。
&br;
CENTER:&fa(fa-solid fa-id-card fa-2x fa-fw, #008000);&fa(fa-solid fa-comment-sms fa-2x, #008000);
CENTER:SMS認証が必要なページです。