icon-font/demo-template.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= fontFamilyName %></title>
<style>
<style type="text/css">
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

body {
	font: 11pt/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
}

.icons {
	margin-bottom:40px;
	-webkit-column-count:5;
	   -moz-column-count:5;
	        column-count:5;
	-webkit-column-gap:20px;
	   -moz-column-gap:20px;
	        column-gap:20px;
}

.icons__item,
.icons__item i {
	line-height:2em;
	cursor:pointer;
	overflow:hidden;
}

.icons__item i {
	font-size: 20px;
	display:inline-block;
	width:32px;
	height:32px;
	text-align:center;
}

/* Legacy duplicate Dashicons CSS */
.dashicons-editor-distractionfree:before {
    content: "\f211";
}

<%= styles %>
</style>
</head>
<body>
<h1><%= fontFamilyName %><% if (version) { %><small>version <%= version %></small><% } %></h1>

<div class="icons" id="icons">
	<% for (var glyphIdx = 0; glyphIdx < glyphs.length; glyphIdx++) { var glyph = glyphs[glyphIdx] %>
		<div class="icons__item" data-name="<%= glyph %>"><i class="<%= baseClass %> <%= classPrefix %><%= glyph %>"></i> <%= classPrefix %><%= glyph %></div>
	<% } %>
</div>

<% if (addLigatures) { %>
<div class="ligature-icons" style="display:none">
	<% for (var glyphIdx = 0; glyphIdx < glyphs.length; glyphIdx++) { var glyph = glyphs[glyphIdx]; %>
		<%= glyph %>
	<% } %>
</div>
<% } %>

<h1>Usage</h1>
<pre><code>&lt;i class=&quot;<%= baseClass ? baseClass + ' ' : '' %><%= classPrefix %><span id="name">name</span>&quot;&gt;&lt;/i&gt;</code></pre>
<% if (addLigatures) { %>
<pre><code>&lt;i class=&quot;ligature-icons&quot;&gt;<span id="name2">name</span>&lt;/i&gt;</code></pre>
<% } %>

<script>
(function() {
	document.getElementById('icons').onclick = function(e) {
		e = e || window.event;
		var name = e.target.getAttribute('data-name') || e.target.parentNode.getAttribute('data-name');
		document.getElementById('name').innerHTML = name;
		<% if (addLigatures) { %>document.getElementById('name2').innerHTML = name;<% } %>
	}
})();
</script>
</body>
</html>