使用FontAwesome替换复选框并更改div颜色时，将复选框居中放置在div中

Question

我已经考虑了几个小时，决定问一下。我正在尝试将我的复选框替换为圆形分区中的"字体真棒"图标。当复选框被选中时，圆形的颜色应该会改变。

我已经设法用图标来替换复选框，但我无法在选中时更改背景。我个人认为我想得太多了，也许可以做得简单得多，但这就是我所拥有的。

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;
}

我怎样才能达到这种效果？

我在这里有一个现场笔会，我一直在那里玩这个。

Answer 1

在从头开始并重新思考之后，我设法想出了一个解决方案。

我没有用毫无意义的divs来封装输入，而是尝试仅使用输入对每个div进行样式化。

要实现此效果，首先将标准复选标记移开：

input[type=checkbox] {
font-family: 'FontAwesome';        // tell this element to use FA
position: absolute;                // absolutely push this thing away
margin-left: -100em;               // buh bye checkmark
font-size: 26px;                   // FA icon size
}

去掉复选框后，我们可以随心所欲地进行造型：

input[type=checkbox]:before {
left: 100em;                   // where the checkmark should have been
border-radius: 50%;            // circle
position: absolute;            // we want it absolutely where we placed it
text-align: center;            // FontAwesome icon alignment
height: 40px;                  // height of the circle
width: 40px;                   // width of the circle
background-color: #337ab7;     // circle color
color: white;                  // icon color
content: "f070";              // FA icon
}

以此为基础，我们可以通过简单地覆盖我们的基本样式来对复选框进行样式设置：

input[type=checkbox]:checked:before {
content: "f06e";                // FA icon
background-color:#be0000;        // circle color
}

有时回过头来重新思考会有所帮助，希望这对某人有所帮助=(

以下是最终结果的实时预览。