Font Awesome 5 - 包含 Bootstrap 時圖標不起作用

Question

我正在創建帶有 fontawesome 圖標的引導按鈕。

這兩個圖標是：

• fas 用戶
• fas 用戶

哪個渲染好。 但是，一旦我添加了引導按鈕 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定義的font-weight

 .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 顯示方形而不是圖標