Font Awesomeをバージョンアップしたらチェックボックスが消えた時の対処法

問題

FontAwesomeのバージョンを4系から5系にあげる際、疑似要素に指定していたFontAwesomeのアイコンが表示されなくなってしまった。

解決方法

５系では-oという接尾辞が使えなくなっているため別のアイコンを使用する

4系で使用していたCheckBox
'\f096' (fa-square-o)

'\f14a'(check-square)

5系で仕様が変わってしまったためバージョンアップすると未チェックのボタン'\f096'が表示されなくなる

そのため新しい'\f0c8'を使う必要がある。

しかしそのままするだけだとデフォルトでSolidになってしまうようで、未チェックでも塗りつぶしになりチェックしているのかどうかがわかりずらいものになる。

'\f0c8'(square) solid

そのためfont-weightでnormalと指定

  &-checkbox {
    .input+label::before,
    input+label::before {
      font-weight: normal;
      content: '\f0c8';
    }
    .input.checked+label::before,
    input:checked+label::before {
      font-weight: bold;
      content: '\f14a';
    }
  }

上の画像のようにわかりやすくなった。