FontAwesome 5在SmartAdmin模板中使用Bootstrap复选框

Question

我使用的是带有角5的SmartAdmin v1.9.1模板，它附带了FontAwesome v4.7.3Pro，它使用Bootstrav3.3.6。我使用npm install --save-dev @fortawesome/fontawesome-free将FA升级到了5.10.0版本。

我的问题不是重复this SO question，而是类似的问题。

升级进展顺利，只是需要改变几个图标。

我正忙着让Bootstrap复选框图标显示出来。它显示良好的v4.7.3，但现在我得到一个小框，在那里的复选标记图标应该-见下文。

下面的CSS显示了复选框样式。我尝试过'\f00c'以外的其他内容，但也有同样的问题。调整字体:确实会导致大小的改变，但小方框仍然存在。

相关HTML:

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

相关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';
}

​

​

我很感激你的帮助！

Answer 1

如下图所示使用它。

在i标记上添加"fa“类，并将CSS从i:后标记移动到i标记

​

.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>

​