Font Awesome 5 - значки не работают при включении Bootstrap

Question

Я создаю bootstrap кнопок с потрясающими значками.

2 иконки:

• fas fa-user
• fas fa-users

, которые отображаются нормально. Однако, как только я добавлю кнопку 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>

Похожие: Шрифт Awesome 5 на псевдоэлементах показывает квадрат вместо значка