src/MadeYourDay/SVG/IconFontGeneratorCLI/CreateInfoCommand.php
protected function getHTMLFromGenerator(IconFontGenerator $generator, $fontFile){

		$fontOptions = $generator->getFont()->getOptions();

		$html = '<!doctype html>
			<html>
			<head>
			<title>'.htmlspecialchars($fontOptions['id']).'</title>
			<style>
				@font-face {
					font-family: "'.$fontOptions['id'].'";
					src: url("'.$fontFile.'") format("svg"),
					     url("'.substr($fontFile, 0, -4).'.woff") format("woff"),
					     url("'.substr($fontFile, 0, -4).'.ttf") format("truetype");
					font-weight: normal;
					font-style: normal;
				}
				body {
					font-family: sans-serif;
					color: #444;
					line-height: 1.5;
					font-size: 16px;
					padding: 20px;
				}
				* {
					-moz-box-sizing: border-box;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					margin: 0;
					paddin: 0;
				}
				.glyph{
					display: inline-block;
					width: 120px;
					margin: 10px;
					text-align: center;
					vertical-align: top;
					background: #eee;
					border-radius: 10px;
					box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
				}
				.glyph-icon{
					padding: 10px;
					display: block;
					font-family: "'.$fontOptions['id'].'";
					font-size: 64px;
					line-height: 1;
				}
				.glyph-icon:before{
					content: attr(data-icon);
				}
				.class-name{
					font-size: 12px;
				}
				.glyph > input{
					display: block;
					width: 100px;
					margin: 5px auto;
					text-align: center;
					font-size: 12px;
					cursor: text;
				}
				.glyph > input.icon-input{
					font-family: "'.$fontOptions['id'].'";
					font-size: 16px;
					margin-bottom: 10px;
				}
			</style>
			</head>
			<body>
			<section id="glyphs">';

		$glyphNames = $generator->getGlyphNames();
		asort($glyphNames);

		foreach($glyphNames as $unicode => $glyph){
			$html .= '<div class="glyph">
				<div class="glyph-icon" data-icon="&#x'.$unicode.';"></div>
				<div class="class-name">icon-'.$glyph.'</div>
				<input type="text" readonly="readonly" value="&amp;#x'.$unicode.';" />
				<input type="text" readonly="readonly" value="\\'.$unicode.'" />
				<input type="text" readonly="readonly" value="&#x'.$unicode.';" class="icon-input" />
			</div>';
		}

		$html .= '</section>
			</body>
		</html>';

		return $html;

	}
protected function getHTMLFromGenerator(IconFontGenerator $generator, $fontFile){

		$fontOptions = $generator->getFont()->getOptions();

		$html = '<!doctype html>
			<html>
			<head>
			<title>'.htmlspecialchars($fontOptions['id']).'</title>
			<style>
				@font-face {
					font-family: "'.$fontOptions['id'].'";
					src: url("'.$fontFile.'") format("svg"),
					     url("'.substr($fontFile, 0, -4).'.woff") format("woff"),
					     url("'.substr($fontFile, 0, -4).'.ttf") format("truetype");
					font-weight: normal;
					font-style: normal;
				}
				body {
					font-family: sans-serif;
					color: #444;
					line-height: 1.5;
					font-size: 16px;
					padding: 20px;
				}
				* {
					-moz-box-sizing: border-box;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					margin: 0;
					paddin: 0;
				}
				.glyph{
					display: inline-block;
					width: 120px;
					margin: 10px;
					text-align: center;
					vertical-align: top;
					background: #eee;
					border-radius: 10px;
					box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
				}
				.glyph-icon{
					padding: 10px;
					display: block;
					font-family: "'.$fontOptions['id'].'";
					font-size: 64px;
					line-height: 1;
				}
				.glyph-icon:before{
					content: attr(data-icon);
				}
				.class-name{
					font-size: 12px;
				}
				.glyph > input{
					display: block;
					width: 100px;
					margin: 5px auto;
					text-align: center;
					font-size: 12px;
					cursor: text;
				}
				.glyph > input.icon-input{
					font-family: "'.$fontOptions['id'].'";
					font-size: 16px;
					margin-bottom: 10px;
				}
			</style>
			</head>
			<body>
			<section id="glyphs">';

		$glyphNames = $generator->getGlyphNames();
		asort($glyphNames);

		foreach($glyphNames as $unicode => $glyph){
			$html .= '<div class="glyph">
				<div class="glyph-icon" data-icon="&#x'.$unicode.';"></div>
				<div class="class-name">icon-'.$glyph.'</div>
				<input type="text" readonly="readonly" value="&amp;#x'.$unicode.';" />
				<input type="text" readonly="readonly" value="\\'.$unicode.'" />
				<input type="text" readonly="readonly" value="&#x'.$unicode.';" class="icon-input" />
			</div>';
		}

		$html .= '</section>
			</body>
		</html>';

		return $html;

	}
creates the HTML for the info page

@param  IconFontGenerator $generator icon font generator
@param  string            $fontFile  font file name
@return string                       HTML for the info page