我使用Bootstrap4制作的网页上没有显示字体真棒图标

我正在使用Bootstrap4(CDN)制作网页,并且打算在我的社交媒体链接中使用FontAwesome图标。但是,在打开页面时,我看到一些蓝色框而不是图标,它们可以正常工作。我只需要显示图标。任何帮助,将不胜感激。

以下是必要的摘要: 1。

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

2。

<ul class="social-icons">

                        <li><a href="https://www.facebook.com/avirup.dey.921" target="_blank"><i class="fab fa-facebook"></i></a></li>
                        <li><a href="https://www.quora.com/Avirup-Dey-5" target="_blank"><i class="fab fa-quora"></i></a></li>
                        <li><a href="https://www.github.com/AvirupJU" target="_blank"><i class="fab fa-github"></i></a></li>
                        <li><a href="mailto: avirupdeyju@outlook.com" target="_blank"><i class="fab fa-envelope"></i></a></li>
                    </ul>

Here is what I see...

评论
  • dquis
    dquis 回复
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
    
    <ul class="social-icons">
      <li><a href="https://www.facebook.com/avirup.dey.921" target="_blank"><i class="fa fa-facebook"></i></a></li>
      <li><a href="https://www.quora.com/Avirup-Dey-5" target="_blank"><i class="fa fa-quora"></i></a></li>
      <li><a href="https://www.github.com/AvirupJU" target="_blank"><i class="fa fa-github"></i></a></li>
      <li><a href="mailto: avirupdeyju@outlook.com" target="_blank"><i class="fa fa-envelope"></i></a></li>
    </ul>
    
  • zamet
    zamet 回复

    Since you are using the v4.*.* of fontawesome the prefix class of invoking your desired icon is fa not fab (fab is a style for brands in version 5.*.* and also fas is a solid style in the same version), so you need to make a change in your script just like this:

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <ul class="social-icons">
      <li><a href="https://www.facebook.com/avirup.dey.921" target="_blank"><i class="fa fa-facebook"></i></a></li>
      <li><a href="https://www.quora.com/Avirup-Dey-5" target="_blank"><i class="fa fa-quora"></i></a></li>
      <li><a href="https://www.github.com/AvirupJU" target="_blank"><i class="fa fa-github"></i></a></li>
      <li><a href="mailto: avirupdeyju@outlook.com" target="_blank"><i class="fa fa-envelope"></i></a></li>
    </ul>
  • 头文字D
    头文字D 回复

    The problem is with the CDN you have. Request a Kit by creating an account on fontawesome. They will give you something like this: <script src="https://kit.fontawesome.com/fc188b5fd5.js" crossorigin="anonymous"></script>
    For displaying the envelope you need to change from <i class="fab fa-envelope"></i> to <i class="fa fa-envelope"></i>.