Question

I’m using Font Awesome for icons in my website. I’m pretty new to HTML & CSS. I was trying to use this for checkboxes, and had hard time in figuring out how I could use it to enable / disable checkbox and get the approrpiate icon shown.

For Example; I’m using the below tags for checkbox:

<div style="font-size: 24px;">
<i id="prime" type="checkbox" class="icon-check-empty"></i>icon-check
</div>

I’m using the below jQuery to change the icon when the checkbox is enabled/disabled:

$(".icon-check-empty").click(function(){
    $('#prime').removeClass('icon-check-empty');
    $('#prime').addClass('icon-check');
});

I’m sure this would not be the way how it should be used. Can you please guide me what should be the way how it should be used.

For now; I want to use the check-boxes, and my goal is to check/uncheck the check-box, and show it’s corresponding icon. When checked: icon-check ; unchecked: icon-check-empty

Please guide me !!

Answer 1

$("yourselector").click(function(){
    if($(this).hasClass('icon-check')){
        $(this).removeClass('icon-check').addClass('icon-check-empty');}
    else {
        $(this).removeClass('icon-check-empty').addClass('icon-check');}
});​

Change yourselector part as you wish