Font Awesomeを使いやすくするmixin

先日発売されたStar Wars JEDI Fallen Orderをウキウキでプレイしてました。グラボが推奨環境(GTX1700/1660 ti)満たせてなくて40fpsくらいしか出なかったけど、逆に映画っぽくて良かったかもしれない。映画は24fpsらしいけど。

Font Awesome、便利ですよね。結構お世話になっています。基本的にはiタグで配置しますが、before/after疑似要素でも使いたい場面もあります。

その際に、fontやらfont-weightやら指定するのがめんどくさくなったので、mixinを作りました。

以下SCSS。バックスラッシュのエスケープが分からなくて小一時間悩んだ…

@mixin far-bfaf($icon){
    content: unquote("\"") + unquote(str-insert($icon, "\\", 1)) + unquote("\"");
    font-family: "Font Awesome\ 5 Free";
    font-weight: 400;
}
@include far-bfaf(f0c8);

font-weightを変えてfasなどの別バージョンも作ればいいと思います。