自作プラグイン/fa

Font Awesomeにはいくつかのスタイルがあり、フリー版で使えるのはSolid、Regular、Brandsの3種類。アイコンを指定する際には一緒にスタイルも指定する。ただしデフォルトでSolidのクラスを付与する様になっているため、Solidのアイコンを表示する場合は指定しなくてもいい。Brandsのアイコンを表示する場合は指定を忘れずに。

引数

solid, fas, s   // Solid
regular, far, r // Regular
brands, fab, b  // Brands

引数での指定とクラスでの指定

// Solid
&fa(solid){heart};
= &fa(fas){heart};
= &fa(s){heart};
= &fa{fas fa-heart};

// Regular 
&fa(regular){heart};
= &fa(far){heart};
= &fa(r){heart};
= &fa{far fa-heart};

// Brands
&fa(brands){apple};
= &fa(fab){apple};
= &fa(b){apple};
= &fa{fab fa-apple};

実際の見え方

相対的なサイズを指定できる。

引数

xs, sm, lg, 2x, 3x, ... 9x, 10x

引数での指定とクラスでの指定

&fa(2x){tree}; = &fa{fas fa-tree fa-2x};

実際の見え方
※基準のサイズが14pxの場合。赤色が基準。

引数

fw

引数での指定とクラスでの指定

&fa(fw){biking}; = &fa{fas fa-biking fa-fw};

実際の見え方

リストの先頭にこのオプションを指定したプラグインを置くことで、リストのマーカーをアイコンに置き換えることができる。他のオプションとも併用可。クラスでの指定はできない。
引数

li

引数での指定とクラスでの指定

-&fa(li){check-square};リスト 1

実際の見え方

• リスト 1
• リスト 2
• リスト 3

回転と反転を別々に設定できる。
引数

90, 180, 270, horizontal, vertical, both

引数での指定とクラスでの指定

&fa(180){chess-knight};           = &fa{fas fa-chess-knight fa-rotate-180};
&fa(horizontal){chess-knight}; = &fa{fas fa-chess-knight fa-flip-horizontal};

実際の見え方

引数

spin, pulse

引数での指定とクラスでの指定

&fa(spin){spinner}; = &fa{fas fa-spinner fa-spin;

実際の見え方

回り込みを解除する場合は#clearを置く。

引数

border, left, right

引数での指定とクラスでの指定

&fa(border){pencil-alt}; = &fa{fas fa-pencil-alt fa-border};
&fa(left){pencil-alt};   = &fa{fas fa-pencil-alt fa-pull-left};

実際の見え方

引数でstackを指定すると、アイコンの代わりにコンテナを作成し、その中で指定されたアイコン2つを重ねて表示する。コンテナの方で他のオプションを指定した場合、両方のアイコンにオプションが反映される。

アイコンは後に指定された方が上に表示される。重ねるアイコンのうち、大きく表示する方の引数に '2' を、小さく表示する方には '1' を指定する。 また、 'inverse' を指定すると色を反転させて表示することができる。

関連する引数

stack, 1, 2, inverse

使用例

&fa(stack,3x){&fa(2,color=skyblue){square};&fa(1,inverse,b){twitter};};

一部はクラスでも指定可能
&fa(stack,3x){&fa(color=skyblue){fas fa-square fa-stack-2x};&fa{fab fa-twitter fa-stack-1x fa-inverse};};

実際の見え方