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

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

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

체크박스와 라벨 만들기

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

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Font Awesome</title>
    <link rel="stylesheet" href="css/all.css">
    <style>
      div {
        margin: 30px;
        font-size: 32px;
      }
    </style>
  </head>
  <body>
    <div>
      <input type="checkbox" id="aa">
      <label for="aa" class="bb"></label>
      <label for="aa" class="cc">Lorem Ipsum Dolor</label>
    </div>
  </body>
</html>

아이콘 찾기

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

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

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

label.bb:before {
  content: "\f0c8";
  font-family: "Font Awesome 5 Free";
}
input#aa:checked + label.bb:before {
  content: "\f14a";
}

체크하기 전의 모습니다.

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

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

input#aa {
  display: none;
}

전체 코드

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

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Font Awesome</title>
    <link rel="stylesheet" href="css/all.css">
    <style>
      div {
        margin: 30px;
        font-size: 32px;
      }
      label.bb:before {
        content: "\f0c8";
        font-family: "Font Awesome 5 Free";
        margin-right: 10px;
        color: #cccccc;
        font-size: 24px;
      }
      input#aa:checked + label.bb:before {
        content: "\f14a";
        color: #000000;
      }
      input#aa {
        display: none;
      }
      label.ee:before {
        content: "\f204";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        margin-right: 10px;
        color: #cccccc;
        position: relative;
        top: 3px;
      }
      input#dd:checked + label.ee:before {
        content: "\f205";
        color: #448aff;
      }
      input#dd {
        display: none;
      }
    </style>
  </head>
  <body>
    <div>
      <input type="checkbox" id="aa">
      <label for="aa" class="bb"></label>
      <label for="aa" class="cc">Lorem Ipsum Dolor</label>
    </div>
    <div>
      <input type="checkbox" id="dd">
      <label for="dd" class="ee"></label>
      <label for="dd" class="ff">Lorem Ipsum Dolor</label>
    </div>
  </body>
</html>