Font Awesome 5をCSSで指定したら表示されない！を解決するSCSSのmixinを作った

Font Awesome 5からは、CSSでの指定方法が4までとは少し違います。結論からいうと、Solid とか Regularみたいなフォントタイプがあって、それぞれ適切な font-weight を指定する必要があり、それをしないと表示されない場合があります。だがしかし、いちいち覚えるの面倒なのでSCSSのmixin化しました。

そのmixinがこちら。

@mixin fontawesome5($content, $type) {
  $font-weight: 400;

  @if($type == fas or $type == solid) {
    $font-weight: 900;

  } @else if($type == fal or $type == light) {
    $font-weight: 300;
  }

  font-family: 'Font Awesome 5 Free';
  font-weight: $font-weight;
  content: $content;
}

使い方は↓

.link {
  &::before {
    @include fontawesome5('\f105', fas);
    
    // 追記スタイルなど
  }
}