自作プラグイン/fa
![]() |
Font Awesomeのアイコンを表示するプラグイン
fa.inc.php | |
---|---|
製作者 | kanateko |
ライセンス | GPLv3 |
バージョン | 2.0.0 |
動作確認 | PukiWiki 1.5.4 - 1.5.4 |
最終更新 | 2025-06-30 |
Font Awesomeのアイコンを表示するプラグイン。フリー版Font Awesome 6 (v6.7.2) での使用を想定。サイズ変更やアニメーションといったFont Awesomeのオプションも使用可能で、クラス名で指定するか、引数として設定することができる。
- Font Awesomeのアイコンを表示する
- Solid、Regular、Brandsが使用可能
- Font Awesomeのオプションを設定可能
- SVG + JS系のオプションは除く
- 2つのアイコンを重ねて表示できる
- スタイルを設定可能
- color、background、filter、margin、padding、text-shadow、 transformに対応
- 任意のクラスを追加可能
ダウンロード
最新: GitHub
日付 | バージョン | 備考 |
---|---|---|
2025-06-30 | 2.0.0 |
|
2021-07-26 | 1.4.0 |
|
2021-07-11 | 1.3.0 |
|
1.2.0 |
| |
1.1.0 |
| |
2021-07-10 | 1.0 |
|
セットアップ
- ダウンロードした「fa.inc.php」をpluginフォルダに入れる。
- 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};
実際の見え方
Solid
Regular
Brands
サイズを変更する
相対的なサイズを指定できる。
引数
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};
実際の見え方
通常
90
180
270
horizontal
vertical
both
アニメーションを加える
引数
spin, pulse, reverse (spin-pulse, spin-reverse), beat, fade, beat-fade, bounce, flip, shake
引数での指定とクラスでの指定
&fa(spin){sync}; = &fa{fas fa-sync fa-spin;
実際の見え方
spin
spin + reverse
pulse
pulse + reverse
beat
fade
beat-fade
bounce
flip
shake
カスタムプロパティにも対応。先頭の"--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};
実際の見え方
leftを指定した場合、アイコンはテキストの左側にフロートされます。
rightを指定した場合は右側に。borderを指定するとアイコンに枠が表示されます。
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};};コメントは禁止されています
コメントは禁止されています
追加したい機能
- 特になし
コメント
コメントはありません。 コメント/自作プラグイン/fa