input checkbox 체크박스를 이용한 부트스트랩 아이콘 토글

체크박스 안에 부트스트랩 아이콘 토글 

 

<label for="ck" class="ckPrice" >
    <input type="checkbox" id="ck">
    <span></span>
</label>
<label for="st" class="star" >
    <input type="checkbox" id="st">
    <span></span>
</label>

 

.ckPrice input[type='checkbox'], .star input[type='checkbox'] { display: none; } 

.ckPrice input[type='checkbox'] + span::after { display:block; 
  content:'\F584'; font-family:"bootstrap-icons", sans-serif; font-size:1rem; color:white; cursor: pointer; width: 24px; height: 24px; } 
.ckPrice input[type='checkbox']:checked + span::after { content:'\F26D' } 
.star input[type='checkbox'] + span::after { display:block; 
  content:'\F588'; font-family:"bootstrap-icons", sans-serif; font-size:1rem; color:white; cursor: pointer; width: 24px; height: 24px; } 
.star input[type='checkbox']:checked + span::after { content:'\F586' }