<!--Copyright - Asna Farid Siddiqui - Vector Tales-->
<!--www.twitter.com/asna_farid-->
<!--SASS-y Social Media Font Icons Hover Effects-->
<div class="head">
  <img src="http://i63.tinypic.com/330qoac.png" height="150"/>
  <h1>-y Social Media Icons</h1>
  <h2>Simple Font Hover Effects</h2>
</div>
<div class="ex1">
  <i class="fa fa-facebook fa-2x" aria-hidden="true"></i>
  <i class="fa fa-twitter fa-2x" aria-hidden="true"></i>
  <i class="fa fa-dribbble fa-2x" aria-hidden="true"></i>
  <i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
  <i class="fa fa-behance fa-2x" aria-hidden="true"></i>
  <i class="fa fa-codepen fa-2x" aria-hidden="true"></i>
</div>
<div class="ex2">
  <i class="fa fa-facebook fa-2x" aria-hidden="true"></i>
  <i class="fa fa-twitter fa-2x" aria-hidden="true"></i>
  <i class="fa fa-dribbble fa-2x" aria-hidden="true"></i>
  <i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
  <i class="fa fa-behance fa-2x" aria-hidden="true"></i>
  <i class="fa fa-codepen fa-2x" aria-hidden="true"></i>
</div>
<div class="ex3">
  <i class="fa fa-facebook fa-2x" aria-hidden="true"></i>
  <i class="fa fa-twitter fa-2x" aria-hidden="true"></i>
  <i class="fa fa-dribbble fa-2x" aria-hidden="true"></i>
  <i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
  <i class="fa fa-behance fa-2x" aria-hidden="true"></i>
  <i class="fa fa-codepen fa-2x" aria-hidden="true"></i>
</div>
<div class="ex4">
  <i class="fa fa-facebook fa-2x" aria-hidden="true"></i>
  <i class="fa fa-twitter fa-2x" aria-hidden="true"></i>
  <i class="fa fa-dribbble fa-2x" aria-hidden="true"></i>
  <i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
  <i class="fa fa-behance fa-2x" aria-hidden="true"></i>
  <i class="fa fa-codepen fa-2x" aria-hidden="true"></i>
</div>
@import "compass";
@import "compass/css3/transform";

html,body{
  background: #fff;
  margin: 0;
}

.head{
  background: #cd679a;
  padding: 40px 0;
  text-align: center;
  h1{
    display: inline-block;
    font-family: 'Slabo 27px', serif;
    font-size: 64px;
    color: #fff;
    margin: 0;
    position: relative;
    top: -40px;
  }
  h2{
    font-family: 'Ubuntu', sans-serif;
    color: #fff;
    margin: 0 0 20px 0;
  }
}

.ex1,.ex3{
  padding: 60px 0;
  text-align: center;
  background: #fff;
  i{
    margin: 0 20px;
    color: #333;
    cursor: pointer;
  }
}
.ex2,.ex4{
  padding: 60px 0;
  text-align: center;
  background: #333;
  i{
    margin: 0 20px;
    color: #fff;
    cursor: pointer;
  }
}
.ex1{
  i{
    &:hover{
	    		color: #ef43a1;
	    		@include transition(all 300ms cubic-bezier(0.785, 0.135, 0.15, 0.86));
          @include transform(scale(1.5));
    }
  }
}
.ex2{
  i{
    &:hover{
	    		color: #ef43a1;
	    		@include transition(all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55));
	    		font-size: 1.5em;
    }
  }
}
.ex3{
  i{
    &:hover{
	    		color: #ef43a1;
	    		@include transition(all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55));
          @include transform(translateY(-10px));
    }
  }
}
.ex4{
  i{
    &:hover{
      color: #ef43a1;
      @include transition(all 600ms cubic-bezier(.99,0,.57,.94));
      @include transform(rotate(360deg));
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.