自作プラグイン/fa.inc.php

fa.inc.php†

サマリ	Font Awesomeのアイコンを表示するプラグイン
リビジョン	1.4
対応バージョン	1.5.3
投稿者	kanateko
投稿日	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

↑

ダウンロード & インストール†

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

https://jpngamerswiki.com/?bde73f7df7

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

↑

プラグインの仕様†

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

↑

使用方法†

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

ベーシック

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

リストにアイコンを使用する場合

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

2つのアイコンを重ねる場合

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

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

↑

オプション†

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

アイコンスタイル

それぞれ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オプションを指定した本プラグインを設置します。

// 使用例
--&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を指定するとアイコンに枠が表示されます。

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

引数でstackを指定すると、アイコンの代わりにコンテナを作成し、その中で指定されたアイコン2つを重ねて表示します。コンテナの方で他のオプションを指定した場合、両方のアイコンにオプションが反映されます。
アイコンは後に指定された方が上に表示されます。重ねるアイコンのうち、大きく表示する方の引数に '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

↑

ライセンス†

GPL v3

PukiWikiについて

Info in English

このサイトについて
- WebTrack
- Web委員日誌

お試し
- PukiWiki 1.5

↑

Developer