How to use Font Awesome for checkboxes etc

How to use Font Awesome for checkboxes etc

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:

icon-check

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

Solutions/Answers:

Solution 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

Solution 2:

Here is my simple CSS-only method:

input[type="radio"],
input[type="checkbox"] {
  display:none;
}

input[type="radio"] + span:before,
input[type="checkbox"] + span:before {
  font-family: 'FontAwesome';
  padding-right: 3px;
  font-size: 20px;
}

input[type="radio"] + span:before {
  content: "\f10c"; /* circle-blank */
}

input[type="radio"]:checked + span:before {
  content: "\f111"; /* circle */
}

input[type="checkbox"] + span:before {
  content: "\f096"; /* check-empty */
}

input[type="checkbox"]:checked + span:before {
  content: "\f046"; /* check */
}

The basic idea is to select spans:before that is next to input you want. I made an example with checkboxes & radios. If you are using less/sass, you could just include the .icon-glass:before declarations, to make it all easier to maintain & modify.

As a side-note, you can style things however you like using this method, so change color, background, shadow-color, icons, etc.

Related:  Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink

You can get the character to add using the FontAwesome source.

selectivizr supports :before & :checked, so if you are supporting IE6-8, use that to support IE6+:

<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"</script>
<noscript><link rel="stylesheet" href="[fallback css that display:inline-block radios & checkboxes]" /></noscript>
<![endif]-->

Solution 3:

Many of the fancy check box solutions out there have the flaw of removing the original input checkbox in the way that it does not receive input focus.
This is not acceptable for two reasons:

  1. You cannot use the keyboard (the Tab-key and spacebar) to navigate to the checkbox and change its value.
  2. You cannot apply hover and focused styles on the checkbox.

The solution above by @konsumer is nice but is lacking the input focus ability.
However I came across
implementation
by @geoffrey_crofte where the input focus works. However it is perhaps not as fancy as @konsumers

So.. I combined those two and put out a plunker example.
The only downside to this solution is that you must use a specific html markup for this to work:

<input type="checkbox" class="fancy-check" id="myId"/>
<label for="myId" ><span>The label text</span></label>

The checkbox must be followed by a label tag. The label tag then can include a span tag including the label text.

I also made it a requirement to use the class fancy-check to the new styles to be applied. This is to avoid the styles destroying other checkboxes in the page that are missing the required, following label tag.

The example is based on using icon fonts, in this case it requires the FontAwesome library.

Related:  How to make display:flex work for responsiveness - Bootstrap?

The stylesheet is here:

/*Move he original checkbox out of the way */
[type="checkbox"].fancy-check {
  position: absolute;
  left: -9999px;
}
/*Align the icon and the label text to same height using tabl-cell display*/
/*If you change the font-size of the text, you may also want to do som padding or alignhment changes here*/
.fancy-check ~ label >  span {
  display: table-cell;
  vertical-align: middle;
  padding-left: 5px;
}
/*The label will contain the icon and the text, will grab the focus*/
[type="checkbox"].fancy-check + label {
  cursor: pointer;
  display: table;
}
/*The icon container, set it to fixed size and font size, the padding is to align the border*/
/*If you change the font-size of this icon, be sure to adjust the min-width as well*/
[type="checkbox"].fancy-check + label:before {
  font-family: 'FontAwesome';
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid transparent;
  font-size: 22px;
  min-width: 28px;
  padding: 2px 0 0 3px;
}
/* toggle font awsome icon*/
[type="checkbox"].fancy-check:checked + label:before {
  content: "\f046";
}
[type="checkbox"].fancy-check:not(:checked) + label:before {
  content: "\f096";    
}
/*Do something on focus, in this case show dashed border*/
[type="checkbox"].fancy-check:focus + label:before {
  border: 1px dashed #777;
}
/*Do something on hover, in this case change the image color*/
[type="checkbox"].fancy-check:hover + label:before {
   color: #67afe5;
}

Solution 4:

If you are running jQuery you could use something like this..

Extend jQuery:

jQuery.fn.extend({
  shinyCheckbox:
    function() {
      var setIcon = function($el) {
        var checkbox = $el.find('input[type=checkbox]');
        var iclass = '';
        if (checkbox.is(':checked')) {
          var iclass = 'icon-check';
        } else {
          var iclass = 'icon-check-empty';
        }
        $el.find('i[class^=icon-]').removeClass('icon-check').removeClass('icon-check-empty').addClass(iclass);
      }
      this.find('input[type=checkbox]').change(function() {
        setIcon($(this).parents('label.checkbox'));
      });
      this.each(function(i, el) {
        setIcon($(el));
      });
    }  
});

$(document).ready(function() {
  $('label.checkbox').shinyCheckbox();
});

And then use this in your html:

<label class="checkbox" for="mycheckbox">
  <i class="icon-check-empty"></i>
  <input type="hidden" name="mycheckbox" value="0" />
  <input id="mycheckbox" name="mycheckbox" type="checkbox" value="1" checked="checked" />
  Meine Checkbox hat einen sehr langen Text
</label>

And some basic css and you have a shiny checkbox:

Related:  Reset Style Sheet with Twitter Bootstrap

input[type="checkbox"] {
    display: none;
}
label.checkbox {
    cursor: pointer;
    display: inline-block;
    margin-left: 1px;
    padding-left: 15px; /* maybe this is not enough for your font size - remember: it's just an example and not best practice */
}
label.checkbox .icon-check:before, label.checkbox .icon-check-empty:before {
    margin-left: -15px;
    padding-right: 3px;
}

Solution 5:

Take a look at this: http://codepen.io/jamesbarnett/pen/yILjk

here is the code that worked for me, from the link above.

/*** custom checkboxes ***/

input[type=checkbox] { 
    display:none; 
} 

/* to hide the checkbox itself */
input[type=checkbox] + label:before {
  font-family: FontAwesome;
  display: inline-block;
}

input[type=checkbox] + label:before {
    content: "\f096"; 
} 

/* unchecked icon */
input[type=checkbox] + label:before {    
    letter-spacing: 10px; 
} 

/* space between checkbox and label */
input[type=checkbox]:checked + label:before {
    content: "\f046"; 
} 

/* checked icon */
input[type=checkbox]:checked + label:before { 
    letter-spacing: 5px; 
} 

Solution 6:

Here is a all CSS example that is very clean.

http://jsfiddle.net/8wLBJ/

.checkbox-container { width: 100%; height: 30px; padding: 0 0 0 10px; margin: 5px 0 0 0; border-radius: 3px; background-color: #e5e5e5; }
.checkbox-container label { float: left; padding: 0; margin-top: 7px; }
.checkbox-container label .checkBoxTitle {width: 200px; margin-top: -1px; font-size: 12px;}

.newCheck[type="checkbox"]:not(:checked), .newCheck[type="checkbox"]:checked { position: absolute; left: -9999px;}
.newCheck[type="checkbox"]:not(:checked) + label, .newCheck[type="checkbox"]:checked + label { width: 150px; position: absolute; cursor: pointer; }
.newCheck[type="checkbox"]:not(:checked) + label:before,   .newCheck[type="checkbox"]:checked + label:before { content: ''; position: absolute; left: 0; top: -1px; width: 17px; height: 17px; border: 1px solid #aaa; background: #f8f8f8; border-radius: 3px; box-shadow: inset 0 1px 3px rgba(0,0,0,.1);}
.newCheck[type="checkbox"]:not(:checked) + label:after,    .newCheck[type="checkbox"]:checked + label:after { content: '\f00c'; font-family: FontAwesome; padding-right: 5px; position: absolute; top: -8px; left: 0;  font-size: 20px; color: #555;}
.newCheck[type="checkbox"]:not(:checked) + label:after { opacity: 0;}
.newCheck[type="checkbox"]:checked + label:after { opacity: 1;}
.newCheck[type="checkbox"]:checked + label span, .newCheck[type="checkbox"]:not(:checked) + label span { position:absolute; left:25px; }

References