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

Yukimi Sato 191views 更新:2014年7月18日

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

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

.fa{

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

}

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

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

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません