/*Adding custom checkbox icons*/
.chk label {
    position: relative;
    padding-left: 30px;
    font-size: 14px;
    cursor: pointer;
}

    .chk label:before, label:after {
        font-family: FontAwesome;
        font-size: 21px;
        /*absolutely positioned*/
        position: absolute;
        top: 0;
        left: 0;
    }

    .chk label:before {
        content: '\f096'; /*unchecked*/
    }

    .chk label:after {
        content: '\f046'; /*checked*/
        /*checked icon will be hidden by default by using 0 max-width and overflow hidden*/
        max-width: 0;
        overflow: hidden;
        opacity: 0.5;
        /*CSS3 transitions for animated effect*/
        transition: all 0.35s;
    }

/*hiding the original checkboxes*/
.chk input[type="checkbox"] {
    display: none;
}
    /*when the user checks the checkbox the checked icon will animate in*/
    .chk input[type="checkbox"]:checked + label:after {
        max-width: 25px; /*an arbitratry number more than the icon's width*/
        opacity: 1; /*for fade in effect*/
    }