Font face icons in scss

icon-font.scss

// Start with a mixin
@mixin iconfont {
  font-family: "foundation-icons"; // whatever your icon fonts name is
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  text-decoration: inherit;
}

// Use it
a {
    color: $primary-color;
    @include transition(all 300ms ease-in-out);
    
    &:hover {
      color: darken($primary-color, 10%);
      @include transition(all 300ms ease-in-out);
    }
    
    &.facebook {
      font: 0/0 sans-serif; // Squish original font to nothingness if you want
    
      &:before {
        @include iconfont; // Include mixin from above
        content: "\f1c4"; // This is found in your icon font css file and corresponds to the icon you want to use.
        font-size: 48px; // Control the size of the icon
      }
    }
}