为什么社交图标不会显示

时间：2016-08-19 12:49:31

标签： javascript html css twitter-bootstrap-3

＆＃13;
＆＃13; 
        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;
    }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我添加了代码以在导航栏中显示社交图标，但图标的图像未显示，如果在该区域上悬停，则表示可点击但图像未加载。任何帮助将不胜感激

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

更改一些CSS＆amp; HTML 

<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>
        </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="social"><a href="https://www.facebook.com/deshaengineers"  class="facebook" title="Go to Our Facebook Page"></a></li>

            <li class="social"><a href="https://www.linkedin.com/company/desha-engineers-india-pvt-ltd"  class="linkedin" title="Go to Our Linkedin Page"></a></li>
</ul>
                </div>
            </div>
        </nav>
    </div>
</div>

CSS 

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%;
   text-align: left;

}

ul.social-icons li {
  display: inline-block;
}

li.social a {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: url("../images/img-sprite.png") no-repeat 0px 0px;
}
li.social a.facebook {
  background-position: 0px 0px;
}

li.social a.facebook:hover {
  background-position: 0px -50px;
}



li.social a.instagram {
  background-position: -150px 0px;
}

li.social a.instagram:hover {
  background-position: -150px -50px;
}

https://jsfiddle.net/7pycxo8k/3/

相关问题
最新问题