Kunal Yadav Kunal Yadav - 3 months ago 19
CSS Question

Why does the social icon does not show up



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>





I have added the code to show social icons in the nav bar, but the image for icons is not shown, if hovered on the area it shows that it is clickable but image does not loads. Any help would be appreciated

Answer

It appears that you don't have anything inside of the href tags for your media links. In this codepen link, specifically on line 150 I added in an example image for the linkedin icon.

<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>