Font Awesomeを少しだけ使いやすくするTips

Font Awesomeは使用する時に2つクラスを指定しないといけません。
一つは「.fa」、もう一つは「.fa-◯◯」というアイコン指定のクラスです。

ただ、毎回HTMLで「.fa」も入れるのは手間だし忘れてしまいますよね。
そんな時はSCSSの「@extend」を使ってまとめて適用します。

.fa{

～ここにfaの内容を全て入れる～

}

[class^="fa-"], [class*=" fa-"]{
@extend .fa;
}

これだけでHTMLで「.fa」を記述する必要はなくなりました。