0

我在 Angular 5 中使用 SmartAdmin v1.9.1 模板。它与 FontAwesome v4.7.3 Pro 一起提供，并使用 Bootstrap v3.3.6。我已将 FA 升级到 v5.10.0，使用npm install --save-dev @fortawesome/fontawesome-free.

我的问题不是这个 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';
}

屏幕截图之前和之后

我感谢您的帮助！

4

1 回答 1

0

如下所示使用它。

在 i 标签上添加“fa”类并将 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>

于 2019-08-02T05:31:20.707 回答