Font Awesome 5 - 包含 Bootstrap 时图标不起作用

Question

我正在创建 bootstrap 个带有超棒图标的按钮。

2 个图标是：

fas fa-用户
fas fa-用户

渲染正常。但是，只要我添加 bootstrap 按钮 css，fa-users 按钮就会显示为正方形而不是图标。不确定为什么或如何解决这个问题？非常感谢任何帮助。谢谢

<div>
    <em class="fas fa-user"></em>
    <em class="fas fa-user btn btn-sm btn-purple"></em>
</div>

<div>
    <em class="fas fa-users"></em>
    <em class="fas fa-users btn btn-sm btn-purple"></em>
</div>

Answer 1

btn 应用您需要覆盖的 font-weight 并将其放回 fas

中定义的那个

.fas.btn {
  font-weight:900;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"  crossorigin="anonymous">
<div>
    <em class="fas fa-user"></em>
    <em class="fas fa-user btn btn-sm btn-success"></em>
</div>

<div>
    <em class="fas fa-users"></em>
    <em class="fas fa-users btn btn-sm btn-success"></em>
</div>

Font Awesome 5 - 包含 Bootstrap 时图标不起作用

Font Awesome 5 - icons not working when including Bootstrap

html

css

twitter-bootstrap

font-awesome

font-awesome-5