HTML CSS 체크박스 아이콘으로 대체

Font Awesome이 선행되어야 합니다!

<div class="lock">
    <input class="lock-element" type="checkbox" name="" id="secret"/>
    <div class="fa-xl lock-icon"></div>
</div>

.lock {
    display:inline-block;
    width: 30px;
    height: 30px;
    position:relative;
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
}

.lock-element{
    display:block;
    position:absolute;
    left: -2px;
    top: -12px;
    width:100%;
    height:100%;
    z-index:99999;
    opacity:0;
}

.lock>input[type='checkbox']+div:before{
	content: '\f3c1';
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	color:#FFD866;
}

.lock>input[type='checkbox']:checked+div:before{
    content: '\f023';
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    color:#FFD866;
}