Checkboxes with Font Awesome 5 Icons

FontAwesome 5 Using Bootstrap Checkbox in SmartAdmin Template

Use it like shown below.

Add "fa" class on i tag and move the CSS from i:after tag to i tag

.smart-form .checkbox input+i {  font-family: "Font Awesome 5 Pro";  -webkit-font-smoothing: antialiased;  display: inline-block;  font-style: normal;  font-variant: normal;  text-rendering: auto;  line-height: 1;}
.smart-form .checkbox input+i:after {  content: '\f00c';}
.smart-form .checkbox input:checked:hover+i:after {  content: '\f00d';}
.smart-form .checkbox input:checked:disabled:hover+i:after {  content: '\f00c';}

<script src="https://kit.fontawesome.com/ff81d4d106.js"></script><section class="smart-form">  <label class="checkbox"><input type="checkbox" name="remember" checked (click)="doCheckbox()"><i class="fa"></i>Stay signed in</label></section>

How to use Font Awesome for checkboxes etc

$("yourselector").click(function(){
    if($(this).hasClass('icon-check')){
        $(this).removeClass('icon-check').addClass('icon-check-empty');}
    else {
        $(this).removeClass('icon-check-empty').addClass('icon-check');}
});​

Change yourselector part as you wish

How to use font awesome icons or Bootstrap glyphicons to act like check box

If you use a checkbox input, this becomes very simple. This css rule will set text color of the following label to green:

input:checked + label {
  color: green;
}

HTML:

<input type="checkbox" name="test">
<label for="test"><i class="fas fa-chair"></i>...</label>

how to change font awesome of a checkbox when checkbox is checked

You can change className of icon based on the check state of checkbox

You can restyle according to need . Here check state is triggered when clicked on red container , you can change functionality according to need

function func() {
  var checkBox = document.getElementById("extraOption3")
  var iconChange = document.getElementById("icon")
  if (checkBox.checked) {
    checkBox.checked = false;
    iconChange.className = "fa fa-info"
  } else {
    checkBox.checked = true;
    iconChange.className = "fa fa-link"
  }
}

.d-flex {
  background-color: red;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="d-flex" onclick="func()">
  <input type="checkbox" class="openerp" name="extraOption3" id="extraOption3" value="extraOption3" />
  <span class="fa fa-check text-center"></span>
  <i class="fa fa-info" id="icon"></i>
</div>

Font Awesome CSS checkbox with empty label

Here's a possible solution:
Since your labels are empty anyway, why use them at all (unless you have some hidden screenreader-properties, you don't need empty labels...ever).

The trick is to use the pseudo-elements on the checkboxes themselves instead of the labels. To make the checkboxes work, use visbility:hidden on them and visibility:visible on the pseudo-elements.

Minor drawback: You'll have to fiddle around with font-size a bit, otherwide the glyphs might appear too small.

input[type=checkbox] {  visibility:hidden;}
input[type=checkbox]::before {  visibility: visible;  font-size:16px;  display: inline-block;  letter-spacing: 5px;  content: "\f0c8";  font-family: 'Font Awesome 5 Free';}
input[type=checkbox]:checked::before {  content: "\f14a";  letter-spacing: 5px;  font-family: 'Font Awesome 5 Free';}

<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet"><div>  <input type="checkbox" checked>  <br/>  <input type="checkbox" checked>  <br/>  <input type="checkbox" checked></div>

---

Related Topics