Font Awesome 5 - icons not working when including Bootstrap

Question

I'm creating bootstrap buttons with a fontawesome icons.

The 2 icons are:

• fas fa-user
• fas fa-users

which render ok. However, as soon as I add the bootstrap button css, the fa-users button shows up as a square and not the icon. Not sure why or how to fix this? Any help greatly appreciated. Thanks.

<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 apply a font-weight that you need to override and put it back to the one defined inside 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>

Related: Font Awesome 5 on pseudo elements shows square instead of icon