A Sass mixin for adding Icon Fonts onto a :before or :after

Sass Font Icons

/* FONT ICONS!
 * ===============================================================
 * Requires a font called 'Icons' - usually imported from fontello
 *
 * eg:   
 *     @extend %icon-before-<icon-name>;
 * or
 *     @extend %icon-after-<icon-name>;
 */

$icons: (
  one:   '\e800',
  two:   '\e801',
  three: '\e802'
);
 
 
%iconbase {
  font-family: "icons";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
}


%icon-before:before {
  @extend %iconbase;
  margin: 0 0 0 5px;
}
%icon-after:after {
  @extend %iconbase;
  margin: 0 5px 0 0;
}


@each $iconName, $value in $icons {
  %icon-before-#{$iconName}:before {
    @extend %icon-before;
    content: '#{$value}';
  }
  %icon-after-#{$iconName}:after {
    @extend %icon-after;
    content: '#{$value}';
  }
}