Centering a checkbox within a div while using FontAwesome to replace the checkbox and changing the div color

I have been toying with this for hours and decided to ask. I am trying to replace my checkboxes with Font Awesome icons within a circle div. When the checkbox is checked the circle color is supposed to change.

I have managed to get the icons to replace the checkboxes, but I can not get the background to change when selected. I personally think I over thought this and it could probally be done much simpler, but this is what I have.

HTML:

<div class="actions thread-actions">
   <div class="checkbox visible">
      <button class="action primary-action visible" title="$vbphrase[save_changes]">
         <label for="cb_visible"><input type="checkbox" name="visible" value="yes" id="cb_visible" checked /></label>
      </button>
   </div>
</div>

CSS: (SCSS)

$brand-success: #5cb85c !default;
$brand-danger: #d9534f !default;

.thread-actions .checkbox {
   input[type=checkbox] {
      position: absolute;
      margin-left: -100em;
      margin-right: 100em;
      font-size: 1em;
   }

   input[type=checkbox]:before {
      position: absolute;
      left: 99em;
   }
}

/* Colors ---------------------- */
.thread-actions input[type=checkbox]:checked {
   color: $brand-success;
}

.thread-actions {
   input[type=checkbox]:before {
      font-family: 'FontAwesome';
   }
}

.thread-actions {
   .checkbox.visible input[type=checkbox]:before {
      content: "\f023";
      margin: -22px 0px 0px 17px;
   }
   .checkbox.visible input[type=checkbox]:checked:before {
      content: "\f023";
      background-color: #ff0000;
      /*  f3c2  */
   }
}

.actions .action {
   font-size: 26px;
   border: 0;
   border-radius: 50%;
   height: 48px;
   width: 48px;
   position: relative;
}

How can I achieve this effect?

I have a live PEN here where I have been playing with this.