Plugin/FontAwesome のバックアップ(No.2)

九州産業大学 生命科学部


FontAwesome

fontawesome.io が提供する Free Icon フォントを使用するためのプラグイン
http://fontawesome.io/examples/



書式

&fontawesome( アイコンの class名 );

fontawesome で提供されているアイコンの「class名(後述)」を指定します。

  • アイコンを選択すると、埋め込み用に以下のようなコードが提供されます。
    <i class="fas fa-home"></i>
  • クラス名( fas fa-home )の部分のみを抜き出して、以下のように記述して下さい。
    &fontawesome(fas fa-home);
  • 記号の意味は以下のとおりです。
    • Fas:Font Awesome Solid
    • Fad:Font Awesome Brand



サンプル

&fontawesome(fas fa-home);

  • 事例:このサイトのヘッダー部分に使用しています。
    SocialIcon



応用

アイコンに色をつけるには

以下のように &color(foreground[,background]){text}; プラグインと併用して下さい。

&color(red){&fontawesome(fas fa-home);};



アイコンにリンクを設定するには

以下のように [ [ アイコン>リンク先 ] ] のリダイレクト表記で実現できます。

[[&fontawesome(fab fa-instagram);>http://www.example.com/]]
  •  ← Click!
  •  ← Click!
  •  ← Click!