JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div data-toggle="buttons" class=" ">
    <label class="btn btn-primary btn-sm padding_sm checked" aria-pressed="false">
       <input class="only_checkbox" value="1" autocomplete="off" id="cbx_clear_image" name="cbx_clear_image" type="checkbox" checked="">
       <span class="fa fa-check" aria-hidden="true"></span>Clear
    </label>
</div>

CSS

input.only_checkbox:not(:checked) + .fa-check  {
  visibility: hidden !important;
  margin: 0 !important;
  background-color: red !important;
}

input:not(:checked) + .fa-check {
  visibility: hidden !important;
}