<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');
});