91 lines
2.2 KiB
HTML
91 lines
2.2 KiB
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><i class="<%= baseClass ? baseClass + ' ' : '' %><%= classPrefix %><span id="name">name</span>"></i></code></pre>
|
|
<% if (addLigatures) { %>
|
|
<pre><code><i class="ligature-icons"><span id="name2">name</span></i></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>
|
