• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• Plugin/FontAwesome へ行く。
  • 1 (2020-01-14 (火) 12:54:15)

---

FontAwesome

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

書式

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

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

• 以下のサイトにあるフリーアイコンを使用することができます。
  https://fontawesome.com/icons?d=gallery&m=free

• アイコンを選択すると、埋め込み用に以下のようなコードが提供されます。

  <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!