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

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

プラグインの仕様

使用方法

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

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

オプション

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

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


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2021-09-19 (日) 13:02:11
Site admin: PukiWiki Development Team

PukiWiki 1.5.3+ © 2001-2020 PukiWiki Development Team. Powered by PHP 5.6.40-0+deb8u12. HTML convert time: 0.462 sec.

OSDN