Icon font mixin for Sass. Source: http://jaydenseric.com/blog/fun-with-sass-and-font-icons

icons.scss

// For adding icons to elements using CSS pseudo-elements
// Source: http://jaydenseric.dev/blog/fun-with-sass-and-font-icons
@mixin icon($position: 'before', $styles: true, $icon: false) {
  // Either a :before or :after pseudo-element, defaulting to :before
  &:#{$position} {
    @if $icon {
      // Icon has been specified
      content: match($icons, $icon);
    }
    @if $styles {
      // Suportive icon styles have been specified
      font-family: 'Icons';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
    }
    // Include any extra rules supplied for the pseudo-element
    @content;
  }
}


//Usage
a[href^="mailto"] {
  @include icon('before', true, 'email') {
    margin-right: 20px;
    color: blue;
  }
}

//Compiles to:
a[href^="mailto"]:before {
  content: 'e005';
  font-family: 'Icons';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  margin-right: 20px;
  color: blue;
}