FontAwesome round social icons

font-awesome social round icons css.md

Credits here: FortAwesome/Font-Awesome#4167

I agree. Use Pure css, with border-radius and a fixed width and height.

For example:

.social [class*="fa fa-"] {
    background-color: #333;
    border-radius: 30px;
    color: #fff;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    margin: auto 3px;
    width: 30px;
    font-size: 15px;
    text-align: center;
}

to make it colorize when hovered, for example the twitter icon:

.fa-twitter:hover { 
    background-color: #46c0fb; 
}

You're HTML should look like...

<div class="social">
  <a class="fa fa-twitter" title="" target="_blank" href="#"></a>
  <a class="fa fa-facebook" title="" target="_blank" href="#"></a>
</div>