Font Awesome 5 图标在 Bootstrap 4 上不起作用答案

【问题标题】：Font Awesome 5 Icons not working on Bootstrap 4Font Awesome 5 图标在 Bootstrap 4 上不起作用
【发布时间】：2018-07-01 17:20:22
【问题描述】：

我试图在引导暗按钮上添加 github (class="fas fa-github") 图标，但按钮图标和文本没有出现（控制台不显示任何内容）

代码：

<div class="jumbotron">
    <h1 class="display-4">Henrique Borges</h1>
    <p class="lead">Programador experiente e Web Designer.</p>
    <hr class="my-4">
    <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
    <p class="lead">
    <a class="fas fa-github btn btn-dark btn-lg" href="#" role="button">Github</a>
    </p>
</div>

我已经包含了 BS 和 FA 库：

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/fontawesome-all.min.js"></script>

【问题讨论】：

Font Awesome CSS 是在哪里添加的？
我真的需要包含 Font Awesome CSS 吗？
那么您认为 CSS 类是从哪里来的，例如 fas 和 fas-github？
Font Awesome 5 过去只包含 fontawesome-all.min.js
尝试添加css，但什么也没发生，只是页面加载时间增加了一倍：/

标签： html css twitter-bootstrap font-awesome

【解决方案1】：

试试sn-p。将 fas fa-github 更改为 fab fa-github。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">



<div class="jumbotron">
  <h1 class="display-4">Henrique Borges</h1>
  <p class="lead">Programador experiente e Web Designer.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <p class="lead">
    <i class="fab fa-github btn btn-dark btn-lg" href="#" role="button"> Github</i>
  </p>
</div>

【讨论】：

这行得通，但你能解释一下为什么吗？ fas 也应该可以，不是吗？
@ThomasJensen，据我所知，字体真棒有 4 种图标类型，1. fab - 品牌，fas 或 fa - 实心，远 - 常规，fal - 轻。因此，在他们的 github 等图标文档中，他们提供了前缀为“fab”fontawesome.com/icons/github?style=brands。

【解决方案2】：

我以前遇到过这个问题，尤其是fas 类。对我来说，它一直在我脑海中手动升级我的字体真棒样式表标签。

无论出于何种原因，像 yarn 这样的依赖管理器并不总是拥有最新版本的 font awesome。

https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css

<!-- FontAwesome -->
  <link 
    rel="stylesheet"
    href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
    integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

【讨论】：

【解决方案3】：

.fas 类仅适用于font-weight: 900。确保你有font-weight: 900。

您正在使用多个类fas fa-github btn btn-dark btn-lg，如果其中任何一个没有font-weight: 900 字体将不会显示。

试试这个

.btn {
    font-weight: 900;
}

【讨论】：

Font Awesome fas 类已经默认设置了font-weight: 900，不需要在另一个类上硬编码，而且，使用!important 是一种不好的做法
但如果您将 fas 与 .btn 等其他类一起使用，它将覆盖 font-weight: 900 并且不会显示图标。这是他面临的问题。要覆盖此规则，您需要添加 !important...
@henriquehbr 与许多事情一样，“！important”是一个需要正确使用的工具，而不是一种不好的做法。