Font Awesome 5 Icons not working on Bootstrap 4

Question

I was trying to add the github (class="fas fa-github") icon on a bootstrap dark button, but the button icon and text doesn't appear (the console shows nothing)

Code:

<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>

I´ve already included both the BS and FA libraries:

<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>

Answer 1

I have run into this problem before, particularly with the fas class. For me it has always been manually upgrading my font awesome style sheet tag in my head.

For whatever reason, dependency managers like yarn don't always have the very latest version of 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">

Answer 2

Try the snippet. Changed the fas fa-github to 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>

Answer 3

.fas class will only work with font-weight: 900. make sure you have font-weight: 900.

you are using multiple classes fas fa-github btn btn-dark btn-lg if any of these does not have font-weight: 900 font will not show up.

try this

.btn {
    font-weight: 900;
}