html - 如何使用 Font Awesome 设置 CSS 复选框的样式

Question

我正在尝试使用 Font Awesome 设置我的复选框的样式，这些复选框是从我在 wordpress 中使用的插件自动生成的，我有一个 JSFiddle 中所有内容的模型

http://jsfiddle.net/bBPY5/1/

我的 CSS 似乎有点问题，但我不知道是什么。

<div id="sidebar-cards-archive">
<ul>
    <li class="cat-item cat-item-12">
        <label>
            <input type="checkbox" name="ofcards-rarity[]" value="12">Common (223)</label>
    </li>
    <li class="cat-item cat-item-14">
        <label>
            <input type="checkbox" name="ofcards-rarity[]" value="14">Epic (40)</label>
    </li>
    <li class="cat-item cat-item-11">
        <label>
            <input type="checkbox" name="ofcards-rarity[]" value="11">Free (83)</label>
    </li>
    <li class="cat-item cat-item-15">
        <label>
            <input type="checkbox" name="ofcards-rarity[]" value="15">Legendary (36)</label>
    </li>
    <li class="cat-item cat-item-13">
        <label>
            <input type="checkbox" name="ofcards-rarity[]" value="13">Rare (84)</label>
    </li>
</ul>
</div>

这是CSS

 @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
 #sidebar-cards-archive ul li {
     list-style: none;
 }
 /*** custom checkboxes ***/
 input[type=checkbox] {
     display:none;
 }
 /* to hide the checkbox itself */
 input[type=checkbox] + label:before {
     font-family: FontAwesome;
     display: inline-block;
 }
 input[type=checkbox] + label:before {
     content:"\f096";
 }
 /* unchecked icon */
 input[type=checkbox] + label:before {
     letter-spacing: 10px;
 }
 /* space between checkbox and label */
 input[type=checkbox]:checked + label:before {
     content:"\f046";
 }
 /* checked icon */
 input[type=checkbox]:checked + label:before {
     letter-spacing: 5px;
 }
 /* allow space for check mark */

Answer 1

好的，您的 CSS 将无法工作，因为它是错误的。

为什么？因为当你说“输入+标签”时，你应该有一个如下所示的 HTML 标记:

<input type="checkbox" name="ofcards-rarity[]" value="15">
<label>Legendary (36)</label> //You will be querying this label css with input + label

参见，<label>紧跟在 <input> 之后.你可以确认这个HERE

现在在你的情况下，你的 <input>是你的 child <label> ，看起来像这样:

<label>
            <input type="checkbox" name="ofcards-rarity[]" value="15">Legendary (36)
</label>

要查询它，您可以这样做:

label>input[type=checkbox] {

}
label>input[type=checkbox]:checked {

}

因为你想在它们之间添加一些东西，所以你将它添加到你的 css 中:

label>input[type=checkbox]:before {

}
label>input[type=checkbox]:checked:before {

}

我已经为你调整好了。这不是实现它的最简单/最可爱的方法，但至少适用于您当前的 HTML。

这是 FIDDLE