styled-componentsでFontAwesome Freeを表示する方法

styled-componentsでFontAwesomeを擬似要素で読み込もうとした時にうまく表示されないという現象に出会いました。

今回はnpmパッケージではなく外部CSSのFontAwesomeを擬似様相で使うときに出くわしました。

調べてみたところ指定方法に一工夫が必要なので紹介します。

目次

1. 通常の読み込み方法
2. styled-componentsでの読み込み
   1. mixinにする
3. styled-componentsでバックスラッシュはエスケープ

通常の読み込み方法

通常無料のFont Awesomeを読み込むには下記のように指定をすることでbeforeやafterで表示できます。

1
2
font-family: Font Awesome\ 5 Free;
content: '\f105';

styled-componentsでの読み込み

styled-componentsで通常と同じように読むこむとうまくいきません。
バックスラッシュの部分をエスケープする必要があります。

1
2
font-family: Font Awesome\\ 5 Free;
content: '\\f105'

https://github.com/styled-components/styled-components/issues/188

mixinにする

毎回font-familyの指定ってどうすればいいんだっけ?と迷ってしまうので下記のようなmixinを使っています。

1
2
3
4
5
6
7
8
9
import { css } from 'styled-components'

export default (content) => {
  return css`
    font-family: Font Awesome\\ 5 Free;
    font-weight: 900;
    content: '${content}';
  `
}

これで読み込みたいところにcontentの文字列を指定して使います。

1
2
3
4
5
styled.div`
  &:after {
    fa('\\f105')
  }
`

styled-componentsでバックスラッシュはエスケープ

今回はFontAwesomeの読み込みがきっかけでしたが、styled-components内でバックスラッシュを使うときはFontAwesomeに限らずエスケープが必要になります。

個人的にはFontAwesomeを使うとき以外でバックスラッシュをCSSの中に書くことはあまりしないので勉強になりました。