How to Style CSS Checkboxes with Font Awesome

Question

I am trying to style my checkboxes with Font Awesome, the checkboxes are auto generated from a plugin I\"m using with wordpress I have a mockup of what everything looks like

Answer 1

No JavaScript but small html manipulation like adding label with "for" attribute. so that when ever click on label checkbox click will trigger.

    .form input[type="checkbox"]{
  display:none;  
}
.form input[type="checkbox"] + label.fa {
    color: #88E2E2;
    font-size: 25px;
    width: 25px;
    height: 25px;
    cursor: pointer;
}
.form input[type="checkbox"]:checked +label.fa{
    background: #fff;
}
.form input[type="checkbox"] + label.fa:before {
     display:inline-block;
     content: "\f096";
     cursor:pointer;
}

.form input[type="checkbox"]:checked +label.fa:before{
    content:"\f046";
    position: relative;
    left: 2px;
}

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <form class="form">
    <input id="check_1" type="checkbox"/><label class="fa" for="check_1"></label>
          <input id="check_2" type="checkbox"/><label class="fa" for="check_2"></label>
    <input id="check_3" type="checkbox"/><label class="fa" for="check_3"></label>

    </form>

Answer 2

Ok, that CSS you have won't work because its wrong.

Why? Because when you say "input + label", you should have an HTML markup like the one below:

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

See, <label> is placed immediately after <input>. You can confirm this HERE

Now in your case, your <input> was a child of you <label>, looking like this:

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

To query that, you could have done something like this:

label>input[type=checkbox] {

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

}

And since you wanted to put something beetwen them, you add this to your css:

label>input[type=checkbox]:before {

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

}

I've adjusted it for you. It's not the easiest/cutest way to implement it, but at least works with your current HTML.

Here's the FIDDLE

Answer 3

I created checkboxes and radio buttons using Font Awesome. The ones I found online had something or the other missing. I needed ones that could be scaled and I didn't want any unclickable gap between the checkbox and its label.

Here are links to the repository and the demo