Generated by SassMeister.com.

SassMeister-input-HTML.html

<a class="my-class" href="#"></a>
<a class="thumbs-up-on-square" href="#"></a>

SassMeister-input.scss

// ----
// Sass (v3.2.18)
// Compass (v0.12.4)
// Bootstrap Sass (v3.1.1.0)
// ----


// **** Building some kind of mixin that overlaps two icons the way you want: **** //

@mixin overlap($top, $under, $class: "", $inverse-top: false){
  $class: if($class == "", #{$top}-on-#{$under}, $class);
  &.#{$class} {
    @extend .fa-stack;
    font-family: FontAwesome;
    &:after {
      @extend .fa-#{$top}:before, .fa-stack-1x;
      @if $inverse-top {
        color: #fff;
      }
    }
    &:before {
      @extend .fa-#{$under}:before, .fa-stack-2x;
    }
  }
}

// **** Using the mixin in your rules and adding your custom classes: **** //

a {
  @include overlap("phone", "square-o", "my-class");
  @include overlap("thumbs-up", "square", "", true);
}







//****** IMPORTING SOME FA BASICS: ******//
@import "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
.fa-phone:before {
  content: "\f095";
}
.fa-square-o:before {
  content: "\f096";
}
.fa-thumbs-up:before {
  content: "\f164";
}
.fa-square:before {
  content: "\f0c8";
}
.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}
.fa-stack-1x,
.fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.fa-stack-1x {
  line-height: inherit;
}
.fa-stack-2x {
  font-size: 2em;
}

SassMeister-output.css

@import "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
a.my-class {
  font-family: FontAwesome;
}
a.thumbs-up-on-square {
  font-family: FontAwesome;
}
a.thumbs-up-on-square:after {
  color: #fff;
}

.fa-phone:before, a.my-class:after {
  content: "\f095";
}

.fa-square-o:before, a.my-class:before {
  content: "\f096";
}

.fa-thumbs-up:before, a.thumbs-up-on-square:after {
  content: "\f164";
}

.fa-square:before, a.thumbs-up-on-square:before {
  content: "\f0c8";
}

.fa-stack, a.my-class, a.thumbs-up-on-square {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}

.fa-stack-1x, a.my-class:after, a.thumbs-up-on-square:after,
.fa-stack-2x,
a.my-class:before,
a.thumbs-up-on-square:before {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}

.fa-stack-1x, a.my-class:after, a.thumbs-up-on-square:after {
  line-height: inherit;
}

.fa-stack-2x, a.my-class:before, a.thumbs-up-on-square:before {
  font-size: 2em;
}

SassMeister-rendered.html

<a class="my-class" href="#"></a>
<a class="thumbs-up-on-square" href="#"></a>