jquery - 폰트어썸으로 찜(like button) 만들기

 

폰트어썸 유니코드로 넣기 

<span class="like"></span>

 

찜버튼 상위요소에 포지션relative 넣기

버튼 클릭 시 .active 클래스 넣기

,active : 빨간하트로 바뀐다  

/* 폰트어썸 4.7 */
@import 
url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
.like {
    cursor: pointer;
    transition: 0.5s;
}
.like:before {
    content: '\f08a';
    font-family: fontawesome;
    position: absolute;
    right: 0;
    top: 0;
    color: #bbb;
}
.like.active:before {
   content: '\f004'; 
   color: crimson;
}

$('.like').click(function() {
    $(this).toggleClass('active');
});