Bootstrap awesome checkbox css does not apply styles

Question

I am trying to use to enhance the look of checkboxes using this css.

My code looks like this:

<div class="padding">
  <div class="checkbox checkbox-success">
    <input id="excludeUser" name="excludeUser" type="checkbox" checked>
    <label data-toggle="tooltip" title="exclude" for="excludeUser">Exclude this user </label>
  </div>
</div>

but it doesn't do anything. I even tried abc-checkbox-success as a class as it is named in the file but that did not help.

Here is fiddle with my try

Answer 1

The class names are abc-checkbox and abc-checkbox-success, not checkbox.

Also, your fiddle is missing font awesome library:

https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

.padding {
    padding: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/awesome-bootstrap-checkbox/1.0.0/awesome-bootstrap-checkbox.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="padding">
  <div class="abc-checkbox abc-checkbox-success">
    <input id="excludeUser" name="excludeUser" type="checkbox" checked>
    <label data-toggle="tooltip" title="exclude" for="excludeUser">Exclude this user </label>
  </div>
</div>