@mixin icon-style($font-family) {
    display: inline-block;
    margin-right: .2em;
    width: 1em;

    font: normal normal normal 1em/1 $font-family;
    font-size: inherit;  // can't have font-size inherit on line above, so need to override
    line-height: 1em;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0); // ensures no half-pixel rendering in firefox

    text-align: center;
    text-decoration: inherit;
    text-rendering: auto; // optimizelegibility throws things off
    text-transform: none;

    speak: none;
}

@mixin font-face($font-family, $base-path, $version: '1', $weight: normal, $style: normal) {
  @font-face {
    font-family: $font-family;
    src: url("#{$base-path}.eot?v=#{$version}");
    src: url("#{$base-path}.eot?v=#{$version}")  format('embedded-opentype'),
         url("#{$base-path}.woff?v=#{$version}") format('woff'),
         url("#{$base-path}.ttf?v=#{$version}")  format('truetype');
    font-weight: $weight;
    font-style: $style;
  }
}