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

只包括套件。将<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

Answer 2

普通CSS和JS怎么样？： fiddle

<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.";
}

社交媒体图标未出现

2 个答案: