<a class="icon-link round facebook fill"><i class="fa fa-facebook"></i></a>
<a class="icon-link round tumblr fill"><i class="fa fa-tumblr"></i></a>
<a class="icon-link round linkedin fill"><i class="fa fa-linkedin"></i></a>
<a class="icon-link round twitter fill"><i class="fa fa-twitter"></i></a>
<a class="icon-link round google-plus fill"><i class="fa fa-google-plus"></i></a>
<a class="icon-link round reddit fill"><i class="fa fa-reddit"></i></a>
<a class="icon-link round youtube fill"><i class="fa fa-youtube"></i></a>
<a class="icon-link round pinterest fill"><i class="fa fa-pinterest"></i></a>
<a class="icon-link round github fill"><i class="fa fa-github"></i></a>
<a class="icon-link round envelope fill"><i class="fa fa-envelope"></i></a>
<a class="icon-link round soundcloud fill"><i class="fa fa-soundcloud"></i></a>
</br>
<a class="icon-link round-corner facebook fill"><i class="fa fa-facebook"></i></a>
<a class="icon-link round-corner tumblr fill"><i class="fa fa-tumblr"></i></a>
<a class="icon-link round-corner linkedin fill"><i class="fa fa-linkedin"></i></a>
<a class="icon-link round-corner twitter fill"><i class="fa fa-twitter"></i></a>
<a class="icon-link round-corner google-plus fill"><i class="fa fa-google-plus"></i></a>
<a class="icon-link round-corner reddit fill"><i class="fa fa-reddit"></i></a>
<a class="icon-link round-corner youtube fill"><i class="fa fa-youtube"></i></a>
<a class="icon-link round-corner pinterest fill"><i class="fa fa-pinterest"></i></a>
<a class="icon-link round-corner github fill"><i class="fa fa-github"></i></a>
<a class="icon-link round-corner envelope fill"><i class="fa fa-envelope"></i></a>
<a class="icon-link round-corner soundcloud fill"><i class="fa fa-soundcloud"></i></a>
</br>

<a class="icon-link facebook fill"><i class="fa fa-facebook"></i></a>
<a class="icon-link tumblr fill"><i class="fa fa-tumblr"></i></a>
<a class="icon-link linkedin fill"><i class="fa fa-linkedin"></i></a>
<a class="icon-link twitter fill"><i class="fa fa-twitter"></i></a>
<a class="icon-link google-plus fill"><i class="fa fa-google-plus"></i></a>
<a class="icon-link reddit fill"><i class="fa fa-reddit"></i></a>
<a class="icon-link youtube fill"><i class="fa fa-youtube"></i></a>
<a class="icon-link pinterest fill"><i class="fa fa-pinterest"></i></a>
<a class="icon-link github fill"><i class="fa fa-github"></i></a>
<a class="icon-link envelope fill"><i class="fa fa-envelope"></i></a>
<a class="icon-link soundcloud fill"><i class="fa fa-soundcloud"></i></a>
</br>
<a class="icon-link round facebook"><i class="fa fa-facebook"></i></a>
<a class="icon-link round tumblr"><i class="fa fa-tumblr"></i></a>
<a class="icon-link round linkedin"><i class="fa fa-linkedin"></i></a>
<a class="icon-link round twitter"><i class="fa fa-twitter"></i></a>
<a class="icon-link round google-plus"><i class="fa fa-google-plus"></i></a>
<a class="icon-link round reddit"><i class="fa fa-reddit"></i></a>
<a class="icon-link round youtube"><i class="fa fa-youtube"></i></a>
<a class="icon-link round pinterest"><i class="fa fa-pinterest"></i></a>
<a class="icon-link round github"><i class="fa fa-github"></i></a>
<a class="icon-link round envelope"><i class="fa fa-envelope"></i></a>
<a class="icon-link round soundcloud"><i class="fa fa-soundcloud"></i></a>
</br>

<a class="icon-link facebook"><i class="fa fa-facebook"></i></a>
<a class="icon-link tumblr"><i class="fa fa-tumblr"></i></a>
<a class="icon-link linkedin"><i class="fa fa-linkedin"></i></a>
<a class="icon-link twitter"><i class="fa fa-twitter"></i></a>
<a class="icon-link google-plus"><i class="fa fa-google-plus"></i></a>
<a class="icon-link reddit"><i class="fa fa-reddit"></i></a>
<a class="icon-link youtube"><i class="fa fa-youtube"></i></a>
<a class="icon-link pinterest"><i class="fa fa-pinterest"></i></a>
<a class="icon-link github"><i class="fa fa-github"></i></a>
<a class="icon-link envelope"><i class="fa fa-envelope"></i></a>
<a class="icon-link soundcloud"><i class="fa fa-soundcloud"></i></a>
</br>
<div class="brand-icons">
<a class="icon-link facebook brand"><i class="fa fa-facebook"></i></a>
<a class="icon-link tumblr brand"><i class="fa fa-tumblr"></i></a>
<a class="icon-link linkedin brand"><i class="fa fa-linkedin"></i></a>
<a class="icon-link twitter brand"><i class="fa fa-twitter"></i></a>
<a class="icon-link google-plus brand"><i class="fa fa-google-plus"></i></a>
<a class="icon-link reddit brand"><i class="fa fa-reddit"></i></a>
<a class="icon-link youtube brand"><i class="fa fa-youtube"></i></a>
<a class="icon-link pinterest brand"><i class="fa fa-pinterest"></i></a>
<a class="icon-link github brand"><i class="fa fa-github"></i></a>
<a class="icon-link envelope brand"><i class="fa fa-envelope"></i></a>
<a class="icon-link soundcloud brand"><i class="fa fa-soundcloud"></i></a>
</div>
@import "bourbon";

$social-color-pallete: (
     facebook: #3b5998,
     tumblr: #32506d,
     linkedin: #007bb6,
     twitter: #00aced,
     google-plus: #dd4b39,
     reddit: #8bbbe3,
     youtube: #df1c31,
     pinterest: #b81621,
     github: #444,
     envelope: #333,
     soundcloud: #f50
);

$social-default-icon-color: #fff;
$social-default-btn-color: #666;
$social-icon-size: 60px;
$social-icon-border: 2px;
$social-icon-border-radius: 5px;

$brand-color: #006FC2;

.icon-link {
    width: $social-icon-size;
    height: $social-icon-size;
    background-color: $social-default-btn-color;
    line-height: $social-icon-size;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    cursor: pointer;
    outline: none;
    margin: 5px;
   @include box-sizing(content-box);
    
    &.fill {
      @each $social-alias, $social-color in $social-color-pallete {
        &.#{$social-alias} {
          background-color: $social-color;
          &:hover {
            background-color: #fff;
            .fa-#{$social-alias} {
              color: $social-color;
              @include transition(color 150ms ease-in-out);
            }
          }
        }
      }
    }
  
  &.brand {
    background-color: #fff;
    .fa {
      color: $brand-color;
    }
  }
    
    &.round {
      border-radius: 50%;
    }
    
    &.round-corner {
      border-radius: $social-icon-border-radius;
    }
  
    &:hover {
      @include transition(background-color 150ms ease-in-out);
      height: $social-icon-size - $social-icon-border * 2;
      line-height: $social-icon-size - $social-icon-border * 2;
      width: $social-icon-size - $social-icon-border * 2;
      background-color: #fff;
      
      @each $social-alias, $social-color in $social-color-pallete {
        &.#{$social-alias} {
          border: $social-icon-border solid $social-color;
        }
      }
      
      .fa {
        line-height: $social-icon-size - $social-icon-border * 2;
      }
      
      @each $social-alias, $social-color in $social-color-pallete {
        .fa-#{$social-alias} {
            color: $social-color;
            @include transition(color 150ms ease-in-out);
        }
      }
  }
  
  .fa{ 
    color: $social-default-icon-color;
    line-height: $social-icon-size;
    font-size: $social-icon-size - $social-icon-size * 0.40;
  }
}

.brand-icons {
  background-color: #ddd;
  padding: 10px 0;
}
View Compiled

External CSS

  1. https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js