A template for grunt-webfont that utilizes the SCSS @extend functionality to limit code duplication without requiring two classes in the markup. Also, automatically hides the text of <b> tags within the icon element.

scss-extendable-icon-template.css

/* Generated by grunt-webfont */

<% if (fontfaceStyles) { %>@font-face {
  font-family:"<%= fontBaseName %>";<% if (eot) { %>
  src:<%= fontSrc1 %>;<% }%>
  src:<%= fontSrc2 %>;
  font-weight:normal;
  font-style:normal;
}
<% } %>
<% if (baseStyles) { if (stylesheet !== 'scss') { %>.icon<% } else if (stylesheet === 'scss') { %>%icon-base<% } %> {
  font-family:"<%= fontBaseName %>";
  display:inline-block;
  font-style:normal;
  speak:none;
  -webkit-font-smoothing:antialiased;
  b {
    display: block;
    height: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
  }
}
<% } %>
<% if (iconsStyles && (stylesheet === 'less' || stylesheet === 'scss')) { %>/* Classes */<% for (var glyphIdx = 0; glyphIdx < glyphs.length; glyphIdx++) { %>
.icon-<%= glyphs[glyphIdx] %> {
  <% if (baseStyles && stylesheet === 'scss') { %>@extend %icon-base;
  <% } %>&:before {
    content:"\<%= (61696+glyphIdx).toString(16) %>";
  }
}<% } %><% } %>