Код
<ul class="social-buttons">
<li><a href="http://vk.com/" class="social-buttons__vk"><i class="fa fa-vk"></i></a></li>
<li><a href="http://ok.ru/" class="social-buttons__ok"><i class="fa fa-odnoklassniki"></i></a></li>
<li><a href="http://facebook.com/" class="social-buttons__fb"><i class="fa fa-facebook"></i></a></li>
<li><a href="http://twitter.com/" class="social-buttons__twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="https://plus.google.com/" class="social-buttons__google"><i class="fa fa-google-plus"></i></a></li>
</ul>
css
Код
.social-buttons {
margin-right: 40px;
}
.social-buttons li {
display: inline-block;
margin-right: 5px;
}
.social-buttons li:last-child {
margin: 0;
}
.social-buttons a {
border-radius: 50%;
color: #fff;
display: inline-block;
height: 29px;
line-height: 29px;
text-align: center;
width: 29px;
}
.social-buttons a:hover {
background-color: #fff;
}
.social-buttons__vk {
background-color: #45688e;
}
.social-buttons__vk:hover {
color: #45688e !important;
}
.social-buttons__ok {
background-color: #f2720c;
}
.social-buttons__ok:hover {
color: #f2720c !important;
}
.social-buttons__fb {
background-color: #3a5795;
}
.social-buttons__fb:hover {
color: #3a5795 !important;
}
.social-buttons__twitter {
background-color: #55acee;
}
.social-buttons__twitter:hover {
color: #55acee !important;
}
.social-buttons__google {
background-color: #d73d32;
}
.social-buttons__google:hover {
color: #d73d32 !important;
}