FontAwesomeを:beforeや:afterなどの擬似要素で使う時のmixin #scss #mixin

FontAwesomeを:beforeや:afterなどの擬似要素で使う時のmixin #scss #mixin

scssやcssを作っているとき、FontAwesomeなどのwebアイコンフォントを使いたいときが多々あります。<i>~</i>のような標準でアイコンを使うHTMLタグを使ってもいいのだけど、どうせならスタイルとして適用させたいときってありますよね。

そのたびごとに、font-familyやらdisplayやらmarginやらを設定していたら大変面倒くさくなってきたので、いっそmixinにしちゃえば楽なんじゃね?と思って作ってみたのが今回のmixinです。

なお、このままだとFontAwesomeでしか使えませんが、もう少しいじればどんなwebアイコンフォントにでも使えるようになります。順をおって説明していきます。

擬似要素でFontAwesomeを使うmixin

という感じでmixinを作ってみました。

$setで左右のどちらにmarginをつけるかを決めますので、値はleftかrightです。
$marginでmarginの値を決めます。単位はコンパイルしたときにつけるので、数値だけの入力です。
$displayで表示方法を決めます。デフォルトではinline-blockにしてあります。

使うときは、

のような感じです。上記の使い方だと、全てデフォルトの値になるので、コンパイル後は

こんな感じになります。

これなら毎回毎回面倒な目に遭わなくて済みますね(笑)

FontAwesome以外のwebアイコンフォントでも使いたい

最近はsvgをつかってwebアイコンフォントを自由に作成できる環境が整ってきているので、どうせなら他のwebアイコンフォントでも使えるようにしたいと思うのが世の常です。

ということで、他のwebアイコンフォントでも使えるようにするmixinは以下です。

最初に$fontというのを追加しただけです。デフォルトではFontAwesomeを使うように設定してあります。

これでどんなwebアイコンフォントでも使えますね!

 

120 views/total