Sassy Icons.

_fonts.scss

/**
 * Path to where the icomoon icon font is housed
 * Used to make the @font-face rule a bit easier to manipulate should the directory structure need to change
 * @access private
 * @group fonts
 */
$icomoon-root: 'fonts/icomoon/fonts/icomoon';

@font-face {
	font-family: 'icomoon';
	src: url('#{$icomoon-root}.eot?-4rvc6i');
	src: url('#{$icomoon-root}.eot?#iefix-4rvc6i') format('embedded-opentype'), url('#{$icomoon-root}.woff?-4rvc6i') format('woff'), url('#{$icomoon-root}.ttf?-4rvc6i') format('truetype'), url('#{$icomoon-root}.svg?-4rvc6i#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}


/**
 * Contains the name of our icon and the CSS unicode map
 * Use the icon to access. It's here if needed.
 *
 * @group fonts
 */
$icons: (
	book: \e604,
	image: \e607,
	coffee: \e603,
	time: \e606,
	twitter: \e602,
	pasta: \e601,
	smoking: \e600,
	mapmarker: \e604,
);

/**
 * Icon placeholder class. Should be used on a psuedo element in conjunction with content: ''
 *
 * In fact, it shouldn't really be used at all because we have the icon mixin. However, the icon
 * mixin uses the :before pseudo element. If you need to use :after, this will help.
 * @example
		.icon-coffee:after {
			content: "#{map-get( 'coffee', $icons )}";
			@extend %icon;
		}
 *
 * @group fonts
 */
%icon {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	padding-right: .5em;
	// Better Font Rendering
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

// Print a class for each icon so it can be used from within HTML
@each $icon, $unicode in $icons {
	.icon-#{$icon}:before {
		@extend %icon;
		content: "#{$unicode}";
	}
}


/**
 * Icon Mixin
 * Extends an icon class. Use in any selector to add an icon before it.
 * @example
 	.coffee-icon {
 		@include icon('coffee');
 	}
 * @group fonts
 * @param $icon named icon from above (e.g. mapmarker)
 * @output this mixin simply extends a generated icon class. So this selector will be added to that icon class.
 */
@mixin icon($icon) {
	@extend .icon-#{$icon};
}