grunt-webfonts
Version:
SVG to webfont converter for Grunt
96 lines (89 loc) • 2.78 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title><%= fontFamilyName %></title>
<style>
body {
margin:0;
padding:10px 20px;
background:#fff;
color:#222;
}
h1, div, footer {
font-family:"Helvetica Neue", Arial, sans-serif;
}
h1 {
margin:0 0 20px;
font-size:32px;
font-weight:normal;
}
h1 small {
font-size: 0.8em;
padding-left: 2em;
}
.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:hover {
color:#3c90be;
}
.icons__item i {
display:inline-block;
width:32px;
text-align:center;
}
.icons__item:hover i {
-webkit-transform:scale(1.5);
transform:scale(1.5);
}
footer {
margin-top:40px;
font-size:14px;
color:#999;
}
<%= 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>
<% } %>
<footer>Generated by <a href="https://github.com/L2jLiga/grunt-webfonts">grunt-webfonts</a>.</footer>
<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>