相关疑难解决方法(0)

我在我的网站上使用Font Awesome作为图标.我是HTML和CSS的新手.我试图将它用于复选框,并且很难弄清楚如何使用它来启用/禁用复选框并显示显示的approrpiate图标.

例如; 我正在使用以下标签复选框:

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

启用/禁用复选框时,我正在使用以下jQuery更改图标:

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

我确信这不应该是如何使用它的方式.你能指导我应该如何使用它的方式.

目前; 我想使用复选框,我的目标是选中/取消选中复选框,并显示相应的图标.选中时:icon-check; 未选中:icon-check-empty

请指导我!!

我使用bootstrap框架进行以下标记.

<div class="col-md-4">
  <div class="custom-container">
    <img class="center-block img-responsive img-circle invite-contact-trybe" src="{$img}" alt="Contact Image">
    <input class="invite-contact-checkbox" type="checkbox">
  </div>
</div>

我想实现以下目标:

无论如何使用CSS做到这一点？

我显然需要3个州:

初始:

.custom-container input[type=checkbox]{}

某种形式的悬停状态:

.custom-container input[type=checkbox]:hover{}

检查时:

.custom-container  input[type=checkbox]:checked{}

谁有人建议解决方案？