问题

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>

回答1:

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

回答2:

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

回答3:

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>

来源：https://stackoverflow.com/questions/49776701/checkboxes-with-font-awesome-5-icons

标签

css