How To Create Checkbox Looks Like Font-awesome Glyphicon

I want to create a font-awesome glyph-icon which act like checkbox, this means that I need to create a checkbox, which need to disguise as font-awesome icon. I don't need to have

Solution 1:

You can do achieve this even without Javascript.

#checkbox{
  background:#2f8cab;
  display:inline-block;
  padding:15px18px;
  border-radius:2px;
  position:relative;
  cursor:pointer;
}

#checkbox-element{
  display:block;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  z-index:99999;
  opacity:0;
}

#checkbox>input[type='checkbox']+i{
  color:rgba(255,255,255,0.2); // color1
}

#checkbox>input[type='checkbox']:checked+i{
  color:#fff; //color2
}

And here's the markup,

<span id="checkbox">
  <input id="checkbox-element"type="checkbox"/>  
  <i class="glyphicon glyphicon-check"></i>
</span>

Have a look at this demo, http://jsbin.com/dusokagise/edit?html,css,output

For Inspiration: https://lokesh-coder.github.io/pretty-checkbox/

Thanks!

Solution 2:

Try this out, by using a span as a wrapper around the icon and a checkbox, you should be able to manipulate the span to check the box, and change the background color.

<span id="checkbox-wrapper">
  <i class="fa fa-flask" aria-hidden="true"></i>
  <input id="flask"type="checkbox" hidden>  
</span>

Here is an example of what the click event might look like in jquery:

$("#checkbox-wrapper").on("click", function() {

    var check = !$("#flask").prop("checked");
    var background = check ? "green" : "red";

    $("#flask").prop("checked", check);
  $(this).css({"background-color" : background});
});

Solution 3:

Is this what you need? An 'on' / 'off' state? https://jsfiddle.net/GunWanderer/k11ajrru/4/

HTML:

<ulid="menu"><liclass="item"><ahref="#"><iclass="glyphicon glyphicon-check"></i></a></li><liclass="item"><ahref="#"><iclass="glyphicon glyphicon-plus-sign"></i></a></li><liclass="item"><ahref="#"><iclass="glyphicon glyphicon-ok-sign"></i></a></li></ul>

CSS:

<style>body {
    padding: 20px;
}
#menu {
    padding:0;
    list-style:none;
}
#menuli {
    background-color: #2D5F8B;
    float:left;
    color:#fff;
    width: 100px;
    padding: 10px;
    text-align:center;
}
#menu.itema > .glyphicon { color:#3979B2;}
#menu.item.activea > .glyphicon { color:#fff;}
a,a:hover {text-decoration:none;}
.active {
    background-color: #3979B2!important;
}
</style>

jQuery script:

<script>
$(document).ready(function() {
    $("#menu .item a").click(function(){
        $("#menu .item").removeClass("active");
        if ($(this).parent().hasClass("active")) {
            $(this).parent().removeClass("active");
        }
        else {
            $(this).parent().addClass("active");
        }
    });
});
</script>