- バックアップ一覧
- 差分 を表示
- 現在との差分 を表示
- ソース を表示
- Plugin/FontAwesome へ行く。
- 1 (2019-12-23 (月) 02:02:25)
- 2 (2020-01-14 (火) 21:20:09)
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/]]