社交媒体图标未出现

Posted 2023-03-05

【中文标题】社交媒体图标未出现

【英文标题】：Social media icon did not appear

【发布时间】：2020-08-14 05:16:12

【问题描述】：

我正在尝试在页脚部分制作图标按钮，但由于某种原因，社交媒体图标没有出现。 我在 head 部分使用了<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>

【问题讨论】：

class="fa fa-facebook-f" 等，而不是 fab

【参考方案1】：

纯 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】：

只需包含该套件即可。在文档开头添加 <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

【讨论】：

如果你使用“kit”，你需要css吗？因为“工具包”会加载 css？