title: font awesome 5 brand icons not working
body: <p>I am using Font Awesome icons in a page I am developing, and while the <code>fas</code> icons work fine, the <code>fab</code> icons do not. Instead, with the <code>fab</code> icons, I get a blank square. I currently have both the Font Awesome CDN link and a link to the local <code>fontawesome-all.min.css</code> file. I have disabled AdBlock Plus, and I am using <code>http-server</code> as my development server. Here is a copy of the head and first section of my page.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en-us"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;title&gt;Download&lt;/title&gt;
          &lt;link rel="stylesheet" href="/css/bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" href="/css/styles.css"&gt;
          &lt;link href="https://fonts.googleapis.com/css?family=Simonetta" rel="stylesheet"&gt;
          &lt;link rel="stylesheet" href="/css/fontawesome-all.min.css"&gt;
          &lt;script defer src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js" integrity="sha384-+Ga2s7YBbhOD6nie0DzrZpJes+b2K1xkpKxTFFcx59QmVPaSA8c7pycsNaFwUK6l" crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js" integrity="sha384-7ox8Q2yzO/uWircfojVuCQOZl+ZZBg2D2J5nkpLqzH1HY0C1dHlTKIbpRz/LG23c" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;!-- banner section --&gt;
          &lt;section id="banner" class="bg-success"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="row max-viewport align-items-center text-center"&gt;
                      &lt;div class="col-md-6 my-5 order-2 order-md-1"&gt;
                          &lt;img src="images/banner.png" alt="banner" class="img-fluid"&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-6 my-5 order-1 order-md-2"&gt;
                          &lt;h1 class="text-danger text-uppercase"&gt;
                              &lt;small&gt;phone crasher&lt;/small&gt; App
                          &lt;/h1&gt;
                          &lt;p class="lead text-white"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
                          &lt;a href="#" class="btn btn-outline-dark text-uppercase m-2"&gt;&lt;i class="fab fa-apple mr-2"&gt;&lt;/i&gt;Apple Store&lt;/a&gt;
                          &lt;a href="#" class="btn btn-outline-dark text-uppercase m-2"&gt;&lt;i class="fab fa-google mr-2"&gt;&lt;/i&gt;Google Store&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;`
  </code></pre>