<span class="fab fa-stack fa-2x">
  <i class="fa fa-circle fa-stack-2x fab-backdrop"></i>
  <i class="fa fa-plus fa-stack-1x fa-inverse fab-primary"></i>
  <i class="fa fa-pencil fa-stack-1x fa-inverse fab-secondary"></i>
</span>
$duration: 0.35s;
$timing-function: ease-in-out;

.fab {
  cursor: pointer;
  &-backdrop {
    color: #db4437;
  }
  &-primary,
  &-secondary {
    transition: all $duration $timing-function;
  }
  &-primary {
    .fab.active & {
      opacity: 0;
      transform: rotate(225deg);
    }
  }
  &-secondary {
    opacity: 0;
    transform: rotate(-225deg);
    .fab.active & {
      opacity: 1;
      transform: rotate(0);
      margin-top: -2px;
    }
  }
}

body {
  text-align: center;
  margin: 20px;
}
View Compiled
$('.fab').click(function() {
  $(this).toggleClass('active');
});
Run Pen

External CSS

  1. //maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

External JavaScript

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