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

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