如何使用字体Awesome的复选框等 [英] How to use Font Awesome for checkboxes etc

问题描述

我对我的网站中的图标使用 Font Awesome 。我很新的HTML& CSS。我试图使用这个复选框，并有困难的时间在弄清楚如何使用它来启用/禁用复选框，并显示approrpiate图标。

例如;我使用以下标签的复选框：

 < div style =font-size：24px; 
< i id =primetype =checkboxclass =icon-check-empty>< / i> icon-check 
< / div> 
  

我使用下面的jQuery来更改图标，当复选框被启用/ p>

  $（。icon-check-empty）click（function（）{
 $（' ）.removeClass（'icon-check-empty'）; 
 $（'＃prime'）。addClass（'icon-check'）; 
}）; 
  

我相信这不会是怎么使用的。你能指导我应该如何使用它的方式。

现在;我想使用复选框，我的目标是检查/取消选中复选框，并显示它的相应图标。选中时：图标检查; unchecked：icon-check-empty

请指导我！

解决方案

pre> $（yourselector）click（function（）{
if（$（this）.hasClass（'icon-check'））{
$ （this）.removeClass（'icon-check'）。addClass（'icon-check-empty'）;}
else {
$（this）.removeClass .addClass（'icon-check'）;}
}）;


code> yourselector 您愿意部分

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 !!

解决方案

$("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

这篇关于如何使用字体Awesome的复选框等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！