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

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