Boas, gostava de saber qual o erro que tenho para impedir o after e o before de aparecere, código;
Código (HTML):
Obrigado.
Código (HTML):
<ul class="socialicons socialicons-left">
<li class="fa-stack fa-fw">
<a href="" data-toggle="tooltip" data-placement="top" data-original-title="Follow on twitter">
<i class="fa fa-stop fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</a>
</li>
<li class="fa-stack fa-fw">
<a href="" data-toggle="tooltip" data-placement="top" data-original-title="Like on facebook">
<i class="fa fa-stop fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</a>
</li>
<li class="fa-stack fa-fw">
<a href="" data-toggle="tooltip" data-placement="top" data-original-title="Follow on instagram">
<i class="fa fa-stop fa-stack-2x"></i>
<i class="fa fa-instagram fa-stack-1x"></i>
</a>
</li>
<li class="fa-stack fa-fw">
<a href="" data-toggle="tooltip" data-placement="top" data-original-title="Subscribe on youtube">
<i class="fa fa-stop fa-stack-2x"></i>
<i class="fa fa-youtube fa-stack-1x"></i>
</a>
</li>
</ul>
Código (CSS):<li class="fa-stack fa-fw">
<a href="" data-toggle="tooltip" data-placement="top" data-original-title="Follow on twitter">
<i class="fa fa-stop fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</a>
</li>
<li class="fa-stack fa-fw">
<a href="" data-toggle="tooltip" data-placement="top" data-original-title="Like on facebook">
<i class="fa fa-stop fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</a>
</li>
<li class="fa-stack fa-fw">
<a href="" data-toggle="tooltip" data-placement="top" data-original-title="Follow on instagram">
<i class="fa fa-stop fa-stack-2x"></i>
<i class="fa fa-instagram fa-stack-1x"></i>
</a>
</li>
<li class="fa-stack fa-fw">
<a href="" data-toggle="tooltip" data-placement="top" data-original-title="Subscribe on youtube">
<i class="fa fa-stop fa-stack-2x"></i>
<i class="fa fa-youtube fa-stack-1x"></i>
</a>
</li>
</ul>
.socialicons {
min-width: 200px;
min-height: 50px;
margin: 0 auto;
top: 155px;
left: 580px;
position: absolute;
}
.socialicons-left {
min-width: 50px;
max-width:50px;
min-height: 200px;
max-height:200px;
margin: 0 auto;
top: 500px;
z-index:1010000;
left: 0;
position: absolute;
background:#32688f;
}
.socialicons:before {
clear:both;
width: 0;
height: 0;
border-style: solid;
border-width: 50px 0 0 50px;
border-color: transparent transparent transparent #007bff;
}
.socialicons:after {
width: 0;
height: 0;
border-style: solid;
border-width: 50px 50px 0 0;
border-color: #007bff transparent transparent transparent;
}
.socialicons li {
width: 45px;
height: 45px;
line-height: 45px;
}
.socialicons li .fa-stack-2x {
font-size: 45px;
}
.socialicons li i {
font-size:30px;
}
.fa-youtube {
color:#cd201f;
}
.fa-instagram {
color:#3f729b;
}
.fa-facebook {
color:#3b5998;
}
.fa-twitter {
color:#55acee;
}
.socialicons a, .socialicons a:hover {
color:#fff;
cursor:pointer;
}
min-width: 200px;
min-height: 50px;
margin: 0 auto;
top: 155px;
left: 580px;
position: absolute;
}
.socialicons-left {
min-width: 50px;
max-width:50px;
min-height: 200px;
max-height:200px;
margin: 0 auto;
top: 500px;
z-index:1010000;
left: 0;
position: absolute;
background:#32688f;
}
.socialicons:before {
clear:both;
width: 0;
height: 0;
border-style: solid;
border-width: 50px 0 0 50px;
border-color: transparent transparent transparent #007bff;
}
.socialicons:after {
width: 0;
height: 0;
border-style: solid;
border-width: 50px 50px 0 0;
border-color: #007bff transparent transparent transparent;
}
.socialicons li {
width: 45px;
height: 45px;
line-height: 45px;
}
.socialicons li .fa-stack-2x {
font-size: 45px;
}
.socialicons li i {
font-size:30px;
}
.fa-youtube {
color:#cd201f;
}
.fa-instagram {
color:#3f729b;
}
.fa-facebook {
color:#3b5998;
}
.fa-twitter {
color:#55acee;
}
.socialicons a, .socialicons a:hover {
color:#fff;
cursor:pointer;
}
Obrigado.