Skip to content

Instantly share code, notes, and snippets.

@davidtheclark
Created August 15, 2013 20:33
Show Gist options
  • Save davidtheclark/6244560 to your computer and use it in GitHub Desktop.
Save davidtheclark/6244560 to your computer and use it in GitHub Desktop.
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.
/* 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) %>";
}
}<% } %><% } %>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment