Adjust Gruntfile

- Separate directories for fonts and CSS
- Add initial CSS template file

Gruntfile.js

@@ -74,19 +74,23 @@ module.exports = function( grunt ) {
 		webfont: {
 			icons: {
 				src: 'svg-min/*.svg',
-				dest: 'icon-font'
+				dest: 'icon-font/fonts',
+				destCss: 'icon-font/css'
 			},
 			options: {
-				'engine': 'node',
-				'autoHint': false,
-				'normalize': true,
-				'optimize': false,
-				'font': 'dashicons',
-				'types': 'eot,woff2,woff,ttf',
-				'order': 'eot,woff,ttf',
-				'embed': true,
-				'descent': 0,
-				'htmlDemoTemplate': 'icon-font/demo-template.html',
+				engine: 'node',
+				autoHint: false,
+				normalize: true,
+				optimize: false,
+				font: 'dashicons',
+				types: 'eot,woff2,woff,ttf',
+				order: 'eot,woff,ttf',
+				embed: true,
+				descent: 0,
+				template: 'icon-font/css-template.css',
+				htmlDemo: true,
+				htmlDemoTemplate: 'icon-font/demo-template.html',
+				destHtml: 'icon-font',
 				templateOptions: {
 					baseClass: 'dashicons',
 					classPrefix: 'dashicons-',

icon-font/css-template.css

@@ -0,0 +1,53 @@
+/* Generated by grunt-webfont */
+
+<% if (fontfaceStyles) { %>
+<% if (fontSrc1 && embed.length) { %>
+@font-face {
+	font-family:"<%= fontFamilyName %>";
+	src:<%= fontSrc1 %>;
+	font-weight:normal;
+	font-style:normal;
+}
+<% } %>@font-face {
+	font-family:"<%= fontFamilyName %>";<% if (fontSrc1) { %>
+	src:<%= fontSrc1 %>;<% }%>
+	src:<%= fontSrc2 %>;
+	font-weight:normal;
+	font-style:normal;
+}
+<% } %>
+<% if (baseStyles) { %>.<%= baseClass %><% if (addLigatures) { %>,
+.ligature-icons<% } %> {
+	<% if (stylesheet === 'less') { %>&:before {<% } %>
+		font-family:"<%= fontFamilyName %>";
+	<% if (stylesheet === 'less') { %>}<% } %>
+	display:inline-block;
+	line-height:1;
+	font-weight:normal;
+	font-style:normal;
+	speak:none;
+	text-decoration:inherit;
+	text-transform:none;
+	text-rendering:auto;
+	-webkit-font-smoothing:antialiased;
+	-moz-osx-font-smoothing:grayscale;
+}
+<% } %>
+
+<% if (iconsStyles) { %>/* Icons */<% for (var glyphIdx = 0; glyphIdx < glyphs.length; glyphIdx++) { %>
+<% if (stylesheet === 'less') { %>
+.<%= classPrefix %><%= glyphs[glyphIdx] %> {
+	&:before {
+		content:"<% if (addLigatures) { %><%= glyphs[glyphIdx] %><% } else { %>\<%= codepoints[glyphIdx] %><% } %>";
+	}<% if (ie7) {%>
+	*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#x<%= codepoints[glyphIdx] %>;');
+	<% } %>
+}
+<% } else { %>
+<% if (ie7) {%>.<%= classPrefix %><%= glyphs[glyphIdx] %> {
+	*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#x<%= codepoints[glyphIdx] %>;');
+}
+<% } %>
+.<%= classPrefix %><%= glyphs[glyphIdx] %>:before {
+	content:"<% if (addLigatures) { %><%= glyphs[glyphIdx] %><% } else { %>\<%= codepoints[glyphIdx] %><% } %>";
+}<% } } } %>