Brk Brk - 4 months ago 18
CSS Question

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 a label for current checkbox,just font-awesome icon which turn on and off.
check state, icon is on color one. uncheck state icon is on color two.

check state:
enter image description here
uncheck state:
enter image description here

How can I do it?!

Answer

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

HTML:

<ul id="menu">
    <li class="item"><a href="#"><i class="glyphicon glyphicon-check"></i></a></li>
    <li class="item"><a href="#"><i class="glyphicon glyphicon-plus-sign"></i></a></li>
    <li class="item"><a href="#"><i class="glyphicon glyphicon-ok-sign"></i></a></li>   
</ul>

CSS:

<style>
body {
    padding: 20px;
}
#menu {
    padding:0;
    list-style:none;
}
#menu li {
    background-color: #2D5F8B;
    float:left;
    color:#fff;
    width: 100px;
    padding: 10px;
    text-align:center;
}
#menu .item a > .glyphicon { color:#3979B2;}
#menu .item.active a > .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>
Comments