Easy custom icon fonts 

Sam Brook

Does the job

Does the job...but

Lives outside the project

=
Difficult to maintain

Solution?

Offline Generator

grunt-webfont

https://github.com/sapegin/grunt-webfont

Gruntfile.js

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

	webfont: {
		icons: {
			src: 'src/icons/*.svg',
                        destCss: 'build/assets/css/',
			options: {
				engine: 'node',
			}
		}
	},
  });

  // Load the plugins
  grunt.loadNpmTasks('grunt-webfont');

  // Default task(s).
  grunt.registerTask('default', ['webfont']);

};

Icon Directory

All your .svgs

Generates Icon Font

And CSS

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

.icon {
	font-family:"icons";
	display:inline-block;
	vertical-align:middle;
	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;
}

icons.css

/* Icons */


.icon_code-page:before {
	content:"\f101";
}


.icon_code-square:before {
	content:"\f102";
}


.icon_css-code:before {
	content:"\f103";
}


.icon_html-code:before {
	content:"\f104";
}


.icon_javascript-code:before {
	content:"\f105";
}


.icon_php-code:before {
	content:"\f106";
}


.icon_source:before {
	content:"\f107";
}

icons.css

Plus html preview

Optional

Change up to sass

    webfont: {
        icons: {
            destCss: 'src/scss/',
            options: {
                engine: 'node',
                stylesheet: 'scss',
                relativeFontPath: '../fonts',
               // template: 'src/templates/webfont.template.css',
               // templateOptions: {
               //     baseClass:   'iconcss',
               //     classPrefix: 'icon-',
               //     elPrefix:    'i-'
                }
            }
        }
    },

Making it easy

Customise sass output

/** Extends icon classes created by grunt-webfont
 *	@param (string) $icon - the icon to use (without icon- prefix)
 */
@mixin icon($icon, $size:false, $extendbase:true) {
	@extend .icon-#{$icon};
	@if($extendbase) {
		@extend .iconcss; 
	}
	@if($size) {
		font-size: $size;
		width: $size;
		height: $size;
	}
}

src/templates/webfont.template.css

Extending the default iconfont _icons.scss file

Allows for this 

/* main.scss */

@import 'icons';

.subnav-item {
    &:before { @include icon('php-code',30px); }
}

.php-icon {
    &:before { @include icon('php-code',30px); }
}

Summary

Easy to update

Consistant per project

Easier maintenance

The End