A template for grunt-webfont that outputs a SCSS "icon" mixin. Also, adds a rule to hide text within a `<span>` inside the designated icon element -- for text describing the icon. (You know: accessibility, SEO, etc.) Below, `output.scss` is some example output, `scss-mixin-icon-template.css` is the template.

output.scss

@font-face {
  font-family:"icon";
  src:url("../fonts/icon.eot");
  src:url("../fonts/icon.eot?#iefix") format("embedded-opentype"),
		url("../fonts/icon.woff") format("woff"),
		url("../fonts/icon.ttf") format("truetype"),
		url("../fonts/icon.svg?#webfont") format("svg");
  font-weight:normal;
  font-style:normal;
}

%icon-base {
  &:before {
    font-family: "icon";
    -webkit-font-smoothing: antialiased;
  }
  b {
    // hide text
    height: 0;
    display: block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
}

@mixin icon($icon) {

  @extend %icon-base;

  @if ($icon == "twitter") {
    &:before {
      content:"\f100";
    }
  }
  
}

scss-mixin-icon-template.css

@font-face {
  font-family:"<%= fontBaseName %>";<% if (eot) { %>
  src:<%= fontSrc1 %>;<% }%>
  src:<%= fontSrc2 %>;
  font-weight:normal;
  font-style:normal;
}

%icon-base {
  &:before {
    font-family: "<%= fontBaseName %>";
    -webkit-font-smoothing: antialiased;
  }
  b {
    // hide text
    height: 0;
    display: block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
}

@mixin <%= fontBaseName %>($icon) {

  @extend %icon-base;

  <% for (var glyphIdx = 0; glyphIdx < glyphs.length; glyphIdx++) { %><% if (glyphIdx === 0) { %>@if<% } else { %>@else if<% } %> ($icon == "<%= glyphs[glyphIdx] %>") {
    &:before {
      content:"\<%= (61696+glyphIdx).toString(16) %>";
    }
  }
  <% } %>
}

whyfore are your extensions backwards? NM. Looks like the plugin only likes .css files. RTFM.

<% if (eot) { %>
should be
<% if ("eot") { %>
For those who are looking here and get
Fatal error: Error while rendering template (.....): eot is not defined

eot is not defined