Bootstrap 3.1.1 Glyphicon Inside Input Box

by Zeljko Tadic

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<h3>Using 2 tags with predefined bootstrap icons</h3>
<div>
    <input type='checkbox' id='checkbox-1' class='tags-checkbox sr-only'/>
    <label for='checkbox-1'>
        <i class='glyphicon glyphicon-unchecked'></i>
        <i class='glyphicon glyphicon-check'></i>
        <span class='label-content'>I'm a fancy checkbox!</span>
    </label>
</div>

<hr/>

<h3>Using a :pseudo class from predefined bootstrap icons</h3>
<div>
    <input type='checkbox' id='checkbox-2' class='pseudo-checkbox sr-only'/>
    <label for='checkbox-2' class='fancy-checkbox-label'>
        I'm a fancy pseudo-checkbox!
    </label>
</div>

CSS

/*the first method: Using 2 tags with predefined bootstrap icons*/

input[type='checkbox'].tags-checkbox:checked + label > i:first-of-type,
input[type='checkbox'].tags-checkbox + label > i:last-of-type{
    display: none;
}
input[type='checkbox'].tags-checkbox:checked + label > i:last-of-type{
    display: inline-block;
}

/*the second method - much cleaner look: Using 2 :pseudo classes from predefined bootstrap icons*/
input[type='checkbox'].pseudo-checkbox + label:before,
input[type='checkbox'].pseudo-checkbox + label:after{
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
input[type='checkbox'].pseudo-checkbox + label:before{/*unchecked icon*/
    content: "\e157";
}
input[type='checkbox']:checked.pseudo-checkbox + label:before{/*checked icon*/
    content: "\e067";
}