javascript - 为什么社交图标不显示

Question

        body{
      
              font-family:Montserrat;
         }
        .navbar, .dropdown-menu{
         background:#44c763;
         border:none;
        border-radius:10px;
        }
    
          .nav>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover,      .dropdown-menu>li>a, .dropdown-menu>li{
      border-bottom: 4px solid transparent;
    }
    .nav>li>a:focus, .nav>li>a:hover,.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
      border-bottom: 3px solid transparent;
      background: none;
    }
    .navbar a, .dropdown-menu>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .navbar-toggle{
     color: #fff;
    }
    .dropdown-menu{
        -webkit-box-shadow: none;
        box-shadow:none;
    }
    
    .nav li:hover:nth-child(8n+1), .nav li.active:nth-child(8n+1){
      border-bottom: #4011E8 5px double;
    }
    .nav li:hover:nth-child(8n+2), .nav li.active:nth-child(8n+2){
      border-bottom: #F3937D 5px double;
    }
    .nav li:hover:nth-child(8n+3), .nav li.active:nth-child(8n+3){
      border-bottom: #FC3665 5px double;
    }
    .nav li:hover:nth-child(8n+4), .nav li.active:nth-child(8n+4){
      border-bottom: #F9D86F 5px double;
    }
    .nav li:hover:nth-child(8n+5), .nav li.active:nth-child(8n+5){
      border-bottom: #0FFA08 5px double;
    }
    .nav li:hover:nth-child(8n+6), .nav li.active:nth-child(8n+6){
      border-bottom: #D1F9DF 5px double;
    }
    .nav li:hover:nth-child(8n+7), .nav li.active:nth-child(8n+7){
      border-bottom: #FF748C 5px double;
    }
    .nav li:hover:nth-child(8n+8), .nav li.active:nth-child(8n+8){
      border-bottom: #FFF078 5px double;
    }
    
    .navbar-toggle .icon-bar{
        color: #fff;
        background: #fff;
    }
    .social {
      width: 90%;
      float: left;
      text-align: left;
    
    }
    
    ul.social-icons li {
      display: inline-block;
    }
    
    ul.social-icons li a {
      display: inline-block;
      width: 50px;
      height: 50px;
      background: url("../images/img-sprite.png") no-repeat 0px 0px;
    }
    ul.social-icons li a.facebook {
      background-position: 0px 0px;
    }
    
    ul.social-icons li a.facebook:hover {
      background-position: 0px -50px;
    }
    
    
    
    ul.social-icons li a.instagram {
      background-position: -150px 0px;
    }
    
    ul.social-icons li a.instagram:hover {
      background-position: -150px -50px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="navbar-wrapper">
        <div class="container-fluid">
            <nav class="navbar navbar-fixed-top">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 
                                aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">Company</a>
                    </div>
                    <div id="navbar" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                           
                            <li class=" dropdown">
                                <a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true" 
                                   aria-expanded="false">About us <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li class=" dropdown">
                                        <a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true" 
                                           aria-expanded="false">Residential</a>
                                    </li>
                                    <li><a href="#">Office</a></li>
                                     <li><a href="#">Mixed Use</a></li>
                                </ul>
                            </li>
                           
                             <li><a href="#" class="">Products</a></li>
                             <li><a href="#" class="">Gallery</a></li>
                              
          </li>
                           
          </ul>
                    
                      
            <ul class="nav navbar-nav pull-right">
             <li class=""><a href="#">kunalyadav@gmail.com</a></li>
             <li class=""><a href="#">984987454225</a></li>
                            
            <li class="connect-social">
              
             
                <li><a href="https://www.facebook.com/deshaengineers"  class="facebook" title="Go to Our Facebook Page"></a></li>
                
                <li><a href="https://www.linkedin.com/company/desha-engineers-india-pvt-ltd"  class="linkedin" title="Go to Our Linkedin Page"></a></li>
                
              
            </li>
          </li>
                           
                           
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>

我已经添加了在导航栏中显示社交图标的代码，但是没有显示图标的图像，如果将鼠标悬停在该区域上，它表明它是可点击的，但图像不会加载。任何帮助将不胜感激

Answer 1

您的媒体链接的 href 标签内似乎没有任何内容。在这个codepen link ，特别是在第 150 行，我为 linkedin 图标添加了一个示例图像。

<li><a href="https://www.linkedin.com/company/desha-engineers-india-pvt-ltd"  class="linkedin" title="Go to Our Linkedin Page"><img src="http://static2.intelimedia.pl/sub/Narysuj-sobie-Gonka-w17896.jpg" style="height:30px;"></a></li>