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

.iconFont {
  display: inline-block;
  font-family: 'CartoIcon';
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1;
}
<% _.each(glyphs, function(glyph) { %>
<%= '/* SG' %>
<%= '# Icon font/' + glyph.fileName.split("_")[2]  %>
```
<i class="iconFont iconFont-<%= glyph.fileName.split("_")[2] %> iconFont--size24"></i>
```
<%= '*/' %>

.iconFont-<%= glyph.fileName.split("_")[2] %>::before {
  content: '\<%= glyph.codePoint %>';
}
<% }); %>