Font Awesome을 버전 업하면 체크 박스가 사라졌을 때의 대처법

문제

FontAwesome 의 버전을 4계에서 5계로 올릴 때, 의사 요소로 지정하고 있던 FontAwesome의 아이콘이 표시되지 않게 되어 버렸다.

해결 방법

5계에서는 -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';
    }
  }

위 이미지처럼 알기 쉬워졌습니다.