自作プラグイン/fa

カテゴリ：プラグイン 自作 追加

Font Awesomeのアイコンを表示するプラグイン

Font Awesomeのアイコンを表示するプラグイン。フリー版Font Awesome 6 (v6.7.2) での使用を想定。サイズ変更やアニメーションといったFont Awesomeのオプションも使用可能で、クラス名で指定するか、引数として設定することができる。

ダウンロード

最新: GitHub

セットアップ

1. ダウンロードした「fa.inc.php」をpluginフォルダに入れる。
2. pukiwiki.cssの下の方に以下の内容を追加する。

   ul.fa-ul { list-style-type: none; }
   

プラグイン設定

PLUGIN_FA_INSERT_CSS

FontAwesome用CSSをプラグイン側で読み込むかどうか。

PLUGIN_FA_CSS

読み込むファイル/CDN。

PLUGIN_FA_DEFAULT_STYLE

デフォルトの表示スタイル

PLUGIN_FA_CLASS_FIXED

固定で追加するクラス。

使用方法

通常使用

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

リスト

-&fa(li[,オプション]){クラス or アイコン名};リストの内容

2つのアイコンを重ねる

&fa(stack[,オプション]){&fa(1 or 2[,オプション]){クラス or アイコン名};&fa(1 or 2[,オプション]){クラス or アイコン名};};

アイコン名とクラス名

表示するアイコンはFont Awesome公式のアイコンリストから好きなものを選び、アイコンの名前かクラスを{}の中に書く。クラスで指定する場合、半角スペースで区切ってオプション用クラスも一緒に指定することができる。

アイコンの名前

アイコンのクラス

Font Awesome関連のオプション

公式ドキュメント

各オプションを引数またはクラスで指定できる。クラスで指定する場合は、アイコンのクラスの後に半角スペースを空けて追加する。クラス指定方法の詳細は公式ドキュメントのStylingを参照。

アイコンのスタイル

Font Awesomeにはいくつかのスタイルがあり、フリー版で使えるのはSolid、Regular、Brandsの3種類。アイコンを指定する際には一緒にスタイルも指定する。ただしデフォルトでSolidのクラスを付与する様になっているため、Solidのアイコンを表示する場合は指定しなくてもいい。Brandsのアイコンを表示する場合は指定を忘れずに。

引数

solid, fas, s   // Solid
regular, far, r // Regular
brands, fab, b  // Brands

引数での指定とクラスでの指定

// Solid
&fa(solid){smile};
= &fa(fas){smile};
= &fa(s){smile};
= &fa{fas fa-smile};

// Regular 
&fa(regular){smile};
= &fa(far){smile};
= &fa(r){smile};
= &fa{far fa-smile};

// Brands
&fa(brands){apple};
= &fa(fab){apple};
= &fa(b){apple};
= &fa{fab fa-apple};

実際の見え方

サイズを変更する

相対的なサイズを指定できる。

引数

xs, sm, lg, 2x, 3x, ... 9x, 10x

引数での指定とクラスでの指定

&fa(2x){tree}; = &fa{fas fa-tree fa-2x};

実際の見え方
※基準のサイズが14pxの場合。赤色が基準。

アイコンの幅を固定する

引数

fw

引数での指定とクラスでの指定

&fa(fw){biking}; = &fa{fas fa-biking fa-fw};

実際の見え方

リストにアイコンを使う

リストの先頭にこのオプションを指定したプラグインを置くことで、リストのマーカーをアイコンに置き換えることができる。他のオプションとも併用可。クラスでの指定はできない。
引数

li

引数での指定とクラスでの指定

-&fa(li){check-square};リスト 1

実際の見え方

• リスト 1
• リスト 2
• リスト 3

アイコンを回転させる

回転と反転を別々に設定できる。
引数

90, 180, 270, horizontal, vertical, both

引数での指定とクラスでの指定

&fa(180){chess-knight};        = &fa{fas fa-chess-knight fa-rotate-180};
&fa(horizontal){chess-knight}; = &fa{fas fa-chess-knight fa-flip-horizontal};

実際の見え方

アニメーションを加える

引数

spin, pulse, reverse (spin-pulse, spin-reverse),
beat, fade, beat-fade, bounce, flip, shake

引数での指定とクラスでの指定

&fa(spin){sync}; = &fa{fas fa-sync fa-spin;

実際の見え方

カスタムプロパティにも対応。先頭の"--fa-"を抜き、「プロパティ = 値」の形で指定する。各種プロパティの詳細は公式ドキュメント参照。

例：&fa(3x,padding=20px,beat,beat-scale=1.5,animation-duration=6s){heart};

ボーダーとアイコンのフロート

回り込みを解除する場合は#clearを置く。

引数

border, left, right

引数での指定とクラスでの指定

&fa(border){pencil-alt}; = &fa{fas fa-pencil-alt fa-border};
&fa(left){pencil-alt};   = &fa{fas fa-pencil-alt fa-pull-left};

実際の見え方

2つのアイコンを重ねて表示する

引数でstackを指定すると、アイコンの代わりにコンテナを作成し、その中で指定されたアイコン2つを重ねて表示する。コンテナの方で他のオプションを指定した場合、両方のアイコンにオプションが反映される。

アイコンは後に指定された方が上に表示される。重ねるアイコンのうち、大きく表示する方の引数に '2' を、小さく表示する方には '1' を指定する。 また、 'inverse' を指定すると色を反転させて表示することができる。

関連する引数

stack, 1, 2, inverse

使用例

&fa(stack,3x){&fa(2,color=skyblue){square};&fa(1,inverse,b){twitter};};

一部はクラスでも指定可能
&fa(stack,3x){&fa(color=skyblue){fas fa-square fa-stack-2x};&fa{fab fa-twitter fa-stack-1x fa-inverse};};

実際の見え方

その他のオプション

class=xxx

任意のクラスを追加する。

background=xxx、color=xxx、filter=xxx、margin=xxx、padding=xxx、text-shadow=xxx、transform=xxx

CSSによるスタイル指定。値の書き方はCSSでの書き方に準ずる。

参考：
background - CSS: カスケーディングスタイルシート | MDN
color - CSS: カスケーディングスタイルシート | MDN
filter - CSS: カスケーディングスタイルシート | MDN
margin - CSS: カスケーディングスタイルシート | MDN
padding - CSS: カスケーディングスタイルシート | MDN
text-shadow - CSS: カスケーディングスタイルシート | MDN
transform - CSS: カスケーディングスタイルシート | MDN

使用例

アイコンを表示してみる

&fa(r){comment}; &fa{ban}; コメントは禁止されています

コメントは禁止されています

2つを重ねてみる

&fa(stack){&fa(1,r){comment};&fa(2){ban};};コメントは禁止されています

コメントは禁止されています

少し大きくしてみる

&fa(stack,lg){&fa(1,r){comment};&fa(2){ban};};コメントは禁止されています

コメントは禁止されています

色を付けてみる

&fa(stack,lg){&fa(1,r){comment};&fa(2,color=#ff6347){ban};};コメントは禁止されています

コメントは禁止されています

影をつけてみる

&fa(stack,lg,text-shadow=1px 1px skyblue){&fa(1,r){comment};&fa(2,color=#ff6347){ban};};コメントは禁止されています

コメントは禁止されています

追加したい機能

• 特になし

コメント