15

Did anyone already designed checkboxes with font awesome 5 icons inside?

I've already googled it and found only examples for FA-4 like http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/

I updated to FA5 and got other things with CSS pseudo elements to run, but inside a checkbox it's not running. I'm open to other solutions without pseudo elements.

Thanks in advance!

Fiddle-Examples:

Fiddle with FA-4.7

/* Checkboxes */

.checkbox input[type="checkbox"] {
  display: none;
}

.checkbox label {
  padding-left: 0;
}

.checkbox label:before {
  content: "";
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: bottom;
  margin-right: 10px;
  line-height: 20px;
  text-align: center;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  font-family: "FontAwesome";
}

.checkbox input[type="checkbox"]:checked+label::before {
  content: "\f00c";
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="checkbox">
  <input type="checkbox" id="profile_notifications" value="" checked/>
  <label for="profile_notifications">
    I agree
  </label>
</div>

Fiddle with FA-5

/* Checkboxes */

.checkbox {
  padding-left: 10px;
  padding-top: 10px;
}

.checkbox input[type="checkbox"] {
  display: none;
}

.checkbox label {
  padding-left: 0;
}

.checkbox label:before {
  content: "";
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: bottom;
  margin-right: 10px;
  line-height: 20px;
  text-align: center;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  font-family: "Font Awesome 5 Solid";
  
}

.checkbox input[type="checkbox"]:checked+label::before {
  font-family: "Font Awesome 5 Solid";
  content: "\f00c";
}

.test {
  padding-left: 10px;
  padding-top: 10px;
}
.test .pseudo-element:before {
  display: none;
  font-family: "Font Awesome 5 Solid";
  content: "\f00c";
}
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
<script>
    window.FontAwesomeConfig = {
    searchPseudoElements: true
  }
</script>

<div class="checkbox">
  <input type="checkbox" id="profile_notifications" value="" checked/>
  <label for="profile_notifications">
    Doesn't work!
  </label>
</div>

<div class="test">
  <label class="pseudo-element">This works!</label>
</div>
markus_Redmine
  • 171
  • 1
  • 1
  • 5
  • Could you show what you did for checkboxes? It is not totally clear what you're asking for... – MBaas Apr 12 '18 at 08:57
  • Yes, sure! I edited my post! – markus_Redmine Apr 12 '18 at 11:47
  • Thank you - that makes much easier the repro/understand the problem and also totally removes the reasons for the votes to close the question. Usually these pseudo-elements need a `display: none;` (as you had it for the working element), but when we add this to the ` .checkbox input[type="checkbox"]:checked+label::before`, it displays nicely, but the checkbox disappears, so there is no way to uncheck the checkbox and I do not have a solution for that. Maybe someone else will jump in... – MBaas Apr 12 '18 at 13:47
  • Here's a Fiddle that also styles radio buttons with just a few lines more CSS: https://jsfiddle.net/z2mxtk7g/ – flygge Mar 12 '20 at 10:55

4 Answers4

4

The above did not work for me. I'm using Bootstrap 3.3.7 (tested also with bootstrap 3.4.0) and font awesome 5.5.0 free. What did work for me is adding this to my custom css file:

/* To get rid of the original and the benefit of not having the blue outline on focus */
input[type='checkbox'], input[type='radio'] {
    display:none;
}
.checkbox input[type='checkbox'] + label:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f00c";
    color: #fff;
}
/* font weight is the only important one. The size and padding makes it look nicer */
.checkbox input[type='checkbox']:checked + label:before {
    font-weight:900;
    font-size: 10px;
    padding-left: 3px;
    padding-top: 0px;
}
.checkbox input[type="checkbox"]:checked + label::after,
.checkbox input[type="radio"]:checked + label::after {
    content: "";
}

EDIT: It seems that when putting this kind of checkbox in a .input-group-addon the margin around the checkbox and the padding inside the checkbox::before is a little off. So I use this:

.input-group-addon .checkbox, .input-group-addon .radio {
    margin-top: 0px;
    margin-bottom: 0px;
}
.input-group-addon .checkbox input[type='checkbox']:checked + label:before {
    font-weight:900;
    font-size: 10px;
    padding-left: 2px;
    padding-top: 2px;
}
MarcM
  • 73
  • 5
3

Use Font Awesome 5 icons as Checkbox

Just change the font-weight.

input[type='checkbox'] {display:none;}
input[type='checkbox'] + label:before {
  font-family: 'Font Awesome 5 Free';
  display: inline-block;
}
/* unchecked */
input[type='checkbox'] + label:before { 
  content: "\f00c";
  font-weight:100;
}
/* checked */
input[type='checkbox']:checked + label:before {font-weight:900;}
Community
  • 1
  • 1
andyJK
  • 49
  • 2
0

After revamping the code font awesome 4 to 5 I’m struggled a lot for minor changes also in existing project like checkbox UI styles with font awesome gone. After doing some R&D and code checking, follow the simple steps I’m showing for check box toggling with font awesome 5.

Just Add Font-weight for checked

CSS 1. Make input type checkbox/radio to display:none;
2. Add label before or after class in css and refer font family as " font-family: 'font awesome 5 free';" give some content type in css " content: "\f004"; " 3. For checked status just apply font-weight more than 600

HTML 1. Place label after checkbox and refer to the checkbox id.

  .wishChkBox  input[type='checkbox'] {
    display:none;
}
 .wishChkBox   input[type='checkbox']+ label:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f004";
 font-size:1.5rem;
 cursor:pointer;
 
 }
 .wishChkBox  input[type='checkbox']:checked + label:before {
     font-weight:600;
 
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
 <div class="wishChkBox">
 
            <input type="checkbox" id="wish1" name="wish1"  />
            <label for="wish1"> </label>
          </div>
surya ramakanth
  • 9
  • 1
0

  .wishChkBox  input[type='checkbox'] {
    display:none;
}
 .wishChkBox   input[type='checkbox']+ label:before {
    font-family: 'Font Awesome 5 Free';
    content: "\f004";
 font-size:1.5rem;
 cursor:pointer;
 
 }
 .wishChkBox  input[type='checkbox']:checked + label:before {
     font-weight:600;
 
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet"/>
 <div class="wishChkBox">
 
            <input type="checkbox" id="wish1" name="wish1"  />
            <label for="wish1"> </label>
          </div>
Noel Ndam
  • 9
  • 1