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

Question

我正在使用带有 Angular 5 的 SmartAdmin v1.9.1 模板。它带有 FontAwesome v4.7.3 Pro，它使用 Bootstrap v3.3.6。我已经使用 npm install --save-dev @fortawesome/fontawesome-free.

将 FA 升级到 v5.10.0

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

升级很顺利，只是换了几个fa-icon

我无法显示 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" class 并将 CSS 从 i:after 标签移动到第 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>

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

FontAwesome 5 Using Bootstrap Checkbox in SmartAdmin Template

twitter-bootstrap-3

smartadmin

font-awesome-5