Social media icons using Font Awesome
.social-icons {
/*margin: 0 auto;*/ /* To center the icons horizontally */
display: table;
}
.social-icons ul li {
list-style-type: none;
list-style-image: none;
margin: 0 6px;
float: left;
border-bottom: none;
}
.social-icons ul li:first-child {
margin-left: 0;
}
.social-icons ul li a,
.social-icons ul li a:hover {
color: #fff;
border-radius: 50%;
font-size: 20px;
font-size: 2rem;
width: 40px;
height: 40px;
padding-top: 3px;
display:inline-block;
}
.social-icons ul li a:hover {
opacity: 0.8;
}
.social-icons ul li.social-facebook a {
background-color: #3a579a;
}
.social-icons ul li.social-twitter a {
background-color: #00abf0;
}
.social-icons ul li.social-google a {
background-color: #df4a32;
}
.social-icons ul li.social-linkedin a {
background-color: #127bb6;
}
.social-icons ul li.social-youtube a {
background-color: #a8240f;
}
<div class="social-icons" align="center">
<ul>
<li class="social-facebook">
<a href="https://www.facebook.com/pages/#"><i class="fa fa-facebook"></i>
</a>
</li>
<li class="social-twitter">
<a href="https://twitter.com/#"><i class="fa fa-twitter"></i>
</a>
</li>
<li class="social-google">
<a href="https://plus.google.com/+#"><i class="fa fa-google-plus"></i>
</a>
</li>
<li class="social-linkedin">
<a href="https://www.linkedin.com/company/#"><i class="fa fa-linkedin"></i>
</a>
</li>
<li class="social-youtube">
<a href="https://www.youtube.com/user/#"><i class="fa fa-youtube-play"></i>
</a>
</li>
</ul>
</div>