Example font icon usage

_icons.scss

//*****************************
// Font Icons
//*****************************

@font-face {
  font-family: 'fontello';
  src: url('../icons/fontello.eot?48442214');
  src: url('../icons/fontello.eot?48442214#iefix') format('embedded-opentype'),
  url('../icons/fontello.woff?48442214') format('woff'),
  url('../icons/fontello.ttf?48442214') format('truetype'),
  url('../icons/fontello.svg?48442214#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

$icon-search: '\e800';
$icon-down-open-big: '\e801';
$icon-facebook: '\e802';
$icon-twitter: '\e803';
$icon-left-open-big: '\e804';
$icon-right-open-big: '\e805';
$icon-up-open-big: '\e806';
$icon-menu: '\e807';
$icon-phone: '\e808';
$icon-check: '\e809';
$icon-cart: '\e80a';
$icon-spin: '\e80b';
$icon-plus: '\e80c';
$icon-cancel: '\e80d';

// Add a font icon. This must be used in a before or after pseudo class
@mixin icon($icon) {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;

  content: '#{$icon}';

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;

  // For safety - reset parent styles, that can break glyph codes
  font-variant: normal;
  text-transform: none;

  // Ensure consistent height
  line-height: 1em;

  // Animation center compensation - margins should be symmetric
  // remove if not needed
  margin-left: .2em;

  // Font smoothing. That was taken from TWBS
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// Add an icon to the before pseudo class
@mixin icon-before($icon) {
  &:before {
    @include icon($icon);
    @content;
  }
}

// Add an icon to the after pseudo class
@mixin icon-after($icon) {
  &:after {
    @include icon($icon);
    @content;
  }
}


//*****************************
// USAGE
//*****************************

// Add icon to selector
.myselector {
  &:before {
    @include icon($icon-plus);
  }
}
// or...
.myselector {
  @include icon-before($icon-plus);
}

// Add icon with custom styles
.myselector {
  @include icon-before($icon-plus) {
    // These all get included in the before pseudo class...
    color: #fff;
    font-size: 20px;
    padding-right: 5px;
  }
}