自作プラグイン/fa

2025-07-02 (水) 03:01:44

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

fa.jpg

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-302.0.0
  • 全面改修
  • FontAwesomeのバージョンを6.7.2にアップデート,Beat, Fade, Beat-Fade, Bounce, Flip, Shakeなどのアニメーションに対応
  • animation関連のカスタムプロパティに対応
  • filter, margin, padding, transformの指定を追加
  • 任意のクラスの追加に対応
2021-07-261.4.0
  • 1回のみ挿入するリスト用のスクリプトを少し整理
2021-07-111.3.0
  • リストにアイコンを適用するオプションを追加
1.2.0
  • 2つのアイコンを重ねて表示するオプションを追加
1.1.0
  • FAのクラスを引数として指定する機能を追加
  • color、text-shadow、backgroundを設定する機能を追加
2021-07-101.0
  • 初版作成

セットアップ

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

name.jpg
アイコンの名前
class.jpg
アイコンのクラス

Font Awesome関連のオプション

option.jpg
公式ドキュメント

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