<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet"> <div class="container"> <div class="row"> <h2>CheckBox with Check and Times</h2> </div> <div class="row"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-success active" style="width: 56px"> <span class="checkBoxAllow fas fa-check"></span> <span class="nonCheckBoxAllow fas fa-times"></span> </label> </div> </div> </div>

.btn.active span.nonCheckBoxAllow { display: none; } .btn.active span.checkBoxAllow { display: inline; } .btn span.nonCheckBoxAllow { display: inline; } .btn span.checkBoxAllow { display: none; }