[CSS] CheckBox에 font-aswesome 사용해서 체크 표시 추가하기

어제 구현했던 checkBox에 체크 표시를 넣고 싶어서 찾아보니

아래와 같이 font aswesome을 사용하면 간단하다고 하여 정리해보았다.

 

Next.js에서 구현할 때를 예로 들고 있다.

 

1) _app.js에 Head 태그를 만들고, 아래 link와 script르 삽입한다.

<!--폰트어썸 최신 CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

=> _app.js -> Head 안에 삽입

 

2) input 태그 type 중 checkbox와 label을 사용하여 checkBox를 커스텀한다.

<p class="chk_box">
  <input type="checkbox" id="chk_top"/>
  <label for="chk_top"></label>
</p>

=> JoinComponent, LoginComponent의 checkbox에서 사용 (변형 시킴)

 

3) 참고한 블로그에서는 :checked일 때만 사용하셨는 데 나는 둘 다 적용했다.

/*input 은 숨겨주기*/
input#chk_top{
  display:none;
  }
/*input 바로 다음의 label*/
input#chk_top + label{
  cursor:pointer;
 }

/*input 바로 다음의 label:before 에 체크하기 전 CSS 설정*/
input#chk_top + label:before{
  content:"";
  display:inline-block;
  width:17px;
  height:17px;
  line-height:17px;
  border:1px solid #cbcbcb;
  vertical-align:middle;/*체크 전과 체크 후 높이 차이 때문에 설정*/
  }
  
/*checked된 input 바로 다음의 label:before 에 체크 후 CSS 설정*/  
input#chk_top:checked + label:before{
  content:"\f00c";/*폰트어썸 유니코드*/
  font-family:"Font Awesome 5 free"; /*폰트어썸 아이콘 사용*/
  font-weight:900;/*폰트어썸 설정*/
  color:#fff;
  background-color:#000;
  border-color:#000;
  font-size:13px;
  text-align:center;
  }

=> styled-components에서 사용했기 때문에 변형 시킴

& #rememberUserInfo {
    display: none;
  }

  & #rememberUserInfo + label {
    cursor: pointer;
  }

  & #rememberUserInfo + label:before {
    content: "\f00c"; /*폰트어썸 유니코드*/
    font-family: "Font Awesome 5 free"; /*폰트어썸 아이콘 사용*/
    font-weight: 600; /*폰트어썸 설정*/
    background-color: #FBFBFB;
    font-size: 12px;
    color: #A1A1AA;
    text-align: center;
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border: 1px solid #cbcbcb;
    border-radius: 2px;
    vertical-align: middle; /*체크 전과 체크 후 높이 차이 때문에 설정*/
  }

  & #rememberUserInfo:checked + label:before {
    content: "\f00c"; /*폰트어썸 유니코드*/
    font-family: "Font Awesome 5 free"; /*폰트어썸 아이콘 사용*/
    font-weight: 600; /*폰트어썸 설정*/
    background-color: #038DFF;
    font-size: 12px;
    color:#FFFFFF;
    text-align: center;
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 22px;
    border: 0px solid #cbcbcb;
    border-radius: 2px;
  }

---

input checkbox CSS 설정 방법