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

【问题标题】：Font Awesome 5 - icons not working when including BootstrapFont Awesome 5 - 包含 Bootstrap 时图标不起作用
【发布时间】：2020-05-06 22:02:24
【问题描述】：

我正在创建带有字体很棒的图标的引导按钮。

这两个图标是：

fas fa-user
fas fa-users

哪个渲染好。但是，只要我添加引导按钮 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>

【问题讨论】：

标签： html css twitter-bootstrap font-awesome font-awesome-5

【解决方案1】：

btn 应用您需要覆盖的font-weight 并将其放回fas 中定义的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>

【讨论】：

谢谢！非常感谢。