@font-face {
  font-family: "<%= fontName %>";
  src: url('<%= fontPath %><%= fontName %>.eot');
  src: url('<%= fontPath %><%= fontName %>.eot?#iefix') format('eot'),
  url('<%= fontPath %><%= fontName %>.woff') format('woff'),
  url('<%= fontPath %><%= fontName %>.ttf') format('truetype'),
  url('<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg');
  font-weight: normal;
  font-style: normal;
}

%icon {
  font-family: "<%= fontName %>";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  // speak: none; // only necessary if not using the private unicode range (firstGlyph option)
  text-decoration: none;
  text-transform: none;
  vertical-align: middle;
}

@function icon-char($filename) {
  $char: "";
  <% _.each(glyphs, function(glyph) { %>
  @if $filename == <%= glyph.name %> {
    $char: "\<%= glyph.character %>";
  }<% }); %>

  @return $char;
}

@mixin icon($filename, $insert: before) {
  &:#{$insert} {
    @extend %icon;
    content: icon-char($filename);
  }
}

<% _.each(glyphs, function(glyph) { %>.icon-<%= glyph.name %> {
  @include icon(<%= glyph.name %>);
}
<% }); %>