Bu kodları nereye eklerseniz orada sorunsuz bir biçimde çıkacaktır. Responsivedir. Mobil cihazlarda yazılar çıkmaz yalnızca iconlar çıkar.
Demo vermek gerekirse;
Kurulum;
Temanızın global.css dosyasını açıp en sona ekleyin;
HTML Kodunu da gözükmesini istediği yere ekleyin.
Demo vermek gerekirse;
Kod:
http://codepen.io/anon/pen/kXQPZRKurulum;
Temanızın global.css dosyasını açıp en sona ekleyin;
Kod:
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
.sosyal {
width: 100%;
font-family: 'Open Sans';
font-size: 14px;
}
.sosyal ul {
padding: 0px;
margin: 0px;
}
.sosyal ul li {
float: left;
padding: 10px;
width: calc( 25% - 20px );
width: -webkit-calc( 25% - 20px );
text-align: center;
display: inline-block;
transition: all 250ms;
}
.sosyal ul li:first-child {
border-radius: 5px 0px 0px 5px;
}
.sosyal ul li:last-child {
border-radius: 0px 5px 5px 0px;
}
.sosyal ul li:hover {
background: gray !important;
}
.sosyal ul li a {
color: #fff;
text-decoration: none;
}
.sosyal ul li.facebook {
background: #3b5998;
}
.sosyal ul li.twitter {
background: #00aced;
}
.sosyal ul li.instagram {
background: #125688;
}
.sosyal ul li.pinterest {
background: #cb2027;
}
@media not screen {
.kontrol {display: none;}
}
@media screen and (max-width:425px) {
.kontrol {display: none;}
}HTML Kodunu da gözükmesini istediği yere ekleyin.
Kod:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<div class="sosyal">
<ul>
<li class="facebook"><a href="#"><i class="fa fa-facebook"></i> <span class="kontrol">facebook</span></a></li>
<li class="twitter"><a href="#"><i class="fa fa-twitter"></i> <span class="kontrol">twitter</span></a></li>
<li class="instagram"><a href="#"><i class="fa fa-instagram"></i> <span class="kontrol">instagram</span></a></li>
<li class="pinterest"><a href="#"><i class="fa fa-pinterest"></i> <span class="kontrol">pinterest</span></a></li>
</ul>
</div>
