How to use Font Awesome for checkboxes etc

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 us

Answer 1

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:

  
  
  
  Meine Checkbox hat einen sehr langen Text

And some basic css and you have a shiny checkbox:

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;
}