Значок социальных сетей не появился

Question

Я пытаюсь сделать значки кнопок в разделе нижнего колонтитула, и по какой-то причине значок социальных сетей не появился.
Я использовал тег <link> в разделе заголовка, но это не работает:

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<footer>
  <div class="container-fluid padding">
    <div class=" row text-center padding ">
    <div class="col-12">
      <div class="col-12 social padding ">
      <a class="btn-floating btn-lg btn-fb" type="button" role="button"><i class="fab fa-facebook-f"></i></a>
      <a class="btn-floating btn-lg btn-tw" type="button" role="button"><i class="fab fa-twitter"></i></a>
      <a class="btn-floating btn-lg btn-gplus" type="button" role="button"><i class="fab fa-google-plus-g"></i></a>
      <a class="btn-floating btn-lg btn-ins" type="button" role="button"><i class="fab fa-instagram"></i></a>
      <a class="btn-floating btn-lg btn-yt" type="button" role="button"><i class="fab fa-youtube"></i></a>
      <a class="btn-floating btn-lg btn-whatsapp" type="button" role="button"><i class="fab fa-whatsapp"></i></a>

    </div>
      <div class="col-12">
        <hr class="light" style="border-top: 2px solid #222222;
  width:1000px;
  margin-top: .3rem;
  margin-bottom: 1rem;">
        <h5>&copy;2020 Copyright </h5>
      </div>
    </div>
  </div>
  </div>
</footer>

Answer 1

Как насчет простых CSS и JS?: скрипка

<a class="btn-fb"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Facebook_icon_2013.svg/300px-Facebook_icon_2013.svg.png"</a>

img {
  width: 10%;
}

document.querySelector('.btn-fb').onclick = () => {
window.location.href = "https://en.wikipedia.org/wiki/Facebook,_Inc.";
}

Answer 2

Просто включите комплект. Добавьте <script src="https://kit.fontawesome.com/13ccb33514.js" crossorigin="anonymous"></script> в начало документа вместо <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">.

Вот ваш код:

<script src="https://kit.fontawesome.com/13ccb33514.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<footer>
  <div class="container-fluid padding">
    <div class=" row text-center padding ">
    <div class="col-12">
      <div class="col-12 social padding ">
      <a class="btn-floating btn-lg btn-fb" type="button" role="button"><i class="fab fa-facebook-f"></i></a>
      <a class="btn-floating btn-lg btn-tw" type="button" role="button"><i class="fab fa-twitter"></i></a>
      <a class="btn-floating btn-lg btn-gplus" type="button" role="button"><i class="fab fa-google-plus-g"></i></a>
      <a class="btn-floating btn-lg btn-ins" type="button" role="button"><i class="fab fa-instagram"></i></a>
      <a class="btn-floating btn-lg btn-yt" type="button" role="button"><i class="fab fa-youtube"></i></a>
      <a class="btn-floating btn-lg btn-whatsapp" type="button" role="button"><i class="fab fa-whatsapp"></i></a>

    </div>
      <div class="col-12">
        <hr class="light" style="border-top: 2px solid #222222;
  width:1000px;
  margin-top: .3rem;
  margin-bottom: 1rem;">
        <h5>&copy;2020 Copyright </h5>
      </div>
    </div>
  </div>
  </div>
</footer>

Живая демоверсия: https://codepen.io/marchmello/pen/zYvdWqa?editors=1000