Font Awesome 5 / TIP / 아이콘으로 체크박스 디자인하기

체크박스는 체크박스를 클릭해도, 라벨을 클릭해도 체크가 됩니다. 체크박스는 이 성질을 이용해서 디자인합니다. 체크박스를 Font Awesome 아이콘으로 변경해서 꾸미는 방법을 알아보겠습니다.

이 방법을 사용하기 위해서는 Font Awesome을 CSS 파일로 연결해야 합니다.

체크박스와 라벨 만들기

체크박스와 라벨을 만듭니다. 라벨은 두 개 만들고, 첫 번째 라벨에는 내용을 넣지 않습니다.

아이콘 찾기

Font Awesome에서 체크박스로 사용할 아이콘을 선택하고, 유니코드를 복사합니다. 체크하기 전과 체크한 후 보여줄 두 개의 아이콘이 필요합니다.

라벨 앞에 아이콘 넣고 체크박스 보이지 않게 하기

첫 번째 라벨 앞에 체크하기 전에 보여줄 아이콘을 넣습니다. 그리고 체크박스를 체크했을 때 체크한 후 보여줄 아이콘으로 변경되도록 만듭니다. 유니코드 앞에 \를 붙여야 한다는 것에 주의합니다.

체크하기 전의 모습니다.

작은 체크박스, 큰 사각형 아이콘, 라벨, 셋 중 하나를 클릭하면 다음과 같이 변합니다.

이제 체크박스를 보이지 않게 합니다.

전체 코드

다음은 전체 코드입니다. 체크박스를 토글로 만든 것을 추가했고, 약간 모양을 바꾸었습니다.