FontAwesome 5 Using Bootstrap Checkbox in SmartAdmin Template

Question

I am using the SmartAdmin v1.9.1 template with Angular 5. It came with FontAwesome v4.7.3 Pro, and it uses Bootstrap v3.3.6. I have upgraded FA to v5.10.0, using npm install --save-dev @fortawesome/fontawesome-free.

My question is not a duplicate of this SO question, but similar.

The upgrade has gone smoothly, just needed to change a few fa- icons.

I'm hung up on getting the Bootstrap checkbox icon to display. It displayed fine with v4.7.3, but now I get a small box, where the check mark icon should be - see below.

The CSS below shows the checkbox style. I have tried other content than '\f00c', but same problem. Adjusting the font: does result in changes in size, but the small box remains.

Relevant HTML:

<section>
  <label class="checkbox">
    <input type="checkbox" name="remember" checked (click)="doCheckbox()">
    <i></i>Stay signed in</label>
</section>

Relevant CSS:

.smart-form .checkbox input + i:after {
  content: '\f00c';
  top: -1px;
  left: 1px;
  width: 15px;
  height: 15px;
  font: normal 16px/19px FontAwesome;
  text-align: center;
}
.smart-form .checkbox input:checked:hover + i:after {
  content: '\f00d';
}
.smart-form .checkbox input:checked:disabled:hover + i:after {
  content: '\f00c';
}

I appreciate your help!

Try changing font-family: "Font Awesome 5 Pro"; – Nandita Sharma Aug 02 '19 at 05:24 — Nandita Sharma, Aug 02 '19 at 05:24

score 0 · Accepted Answer · answered Aug 02 '19 at 05:31

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>

Thanks Nandita! It works perfect. I changed font-family: `"Font Awesome 5 Free";`, and added `font-size: 19px;` to fill the checkbox. — BobC, Aug 02 '19 at 09:15

FontAwesome 5 Using Bootstrap Checkbox in SmartAdmin Template

1 Answers1