dca3bcca9e
"npm run webfont" to build the fonts directory. It requires fontforge and ttfautohint distro packages. partial revert of commit 7137d2893f33e9158e8563a21d9586119d175269
269 lines
5.6 KiB
HTML
269 lines
5.6 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>ion</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;
|
|
}
|
|
|
|
/* Generated by grunt-webfont */
|
|
|
|
|
|
|
|
@font-face {
|
|
font-family:"ion";
|
|
src:url("ion.eot?31a1b735188db616a2142d17947e8a45");
|
|
src:url("ion.eot?31a1b735188db616a2142d17947e8a45#iefix") format("embedded-opentype"),
|
|
url("ion.woff2?31a1b735188db616a2142d17947e8a45") format("woff2"),
|
|
url("ion.woff?31a1b735188db616a2142d17947e8a45") format("woff"),
|
|
url("ion.ttf?31a1b735188db616a2142d17947e8a45") format("truetype"),
|
|
url("ion.svg?31a1b735188db616a2142d17947e8a45#ion") format("svg");
|
|
font-weight:normal;
|
|
font-style:normal;
|
|
}
|
|
|
|
.ion-icon {
|
|
|
|
font-family:"ion";
|
|
|
|
display:inline-block;
|
|
line-height:1;
|
|
font-weight:normal;
|
|
font-style:normal;
|
|
speak:none;
|
|
text-decoration:inherit;
|
|
text-transform:none;
|
|
text-rendering:auto;
|
|
-webkit-font-smoothing:antialiased;
|
|
-moz-osx-font-smoothing:grayscale;
|
|
}
|
|
|
|
|
|
/* Icons */
|
|
|
|
|
|
.ion-navicon-round:before {
|
|
content:"\f101";
|
|
}
|
|
|
|
|
|
.ion-search:before {
|
|
content:"\f102";
|
|
}
|
|
|
|
|
|
.ion-play:before {
|
|
content:"\f103";
|
|
}
|
|
|
|
|
|
.ion-link:before {
|
|
content:"\f104";
|
|
}
|
|
|
|
|
|
.ion-chevron-up:before {
|
|
content:"\f105";
|
|
}
|
|
|
|
|
|
.ion-chevron-left:before {
|
|
content:"\f106";
|
|
}
|
|
|
|
|
|
.ion-chevron-right:before {
|
|
content:"\f107";
|
|
}
|
|
|
|
|
|
.ion-arrow-down-a:before {
|
|
content:"\f108";
|
|
}
|
|
|
|
|
|
.ion-arrow-up-a:before {
|
|
content:"\f109";
|
|
}
|
|
|
|
|
|
.ion-arrow-swap:before {
|
|
content:"\f10a";
|
|
}
|
|
|
|
|
|
.ion-arrow-dropdown:before {
|
|
content:"\f10b";
|
|
}
|
|
|
|
|
|
.ion-globe:before {
|
|
content:"\f10c";
|
|
}
|
|
|
|
|
|
.ion-time:before {
|
|
content:"\f10d";
|
|
}
|
|
|
|
|
|
.ion-location:before {
|
|
content:"\f10e";
|
|
}
|
|
|
|
|
|
.ion-warning:before {
|
|
content:"\f10f";
|
|
}
|
|
|
|
|
|
.ion-error:before {
|
|
content:"\f110";
|
|
}
|
|
|
|
|
|
.ion-film-outline:before {
|
|
content:"\f111";
|
|
}
|
|
|
|
|
|
.ion-music-note:before {
|
|
content:"\f112";
|
|
}
|
|
|
|
|
|
.ion-more-vertical:before {
|
|
content:"\f113";
|
|
}
|
|
|
|
|
|
.ion-magnet:before {
|
|
content:"\f114";
|
|
}
|
|
|
|
|
|
.ion-close:before {
|
|
content:"\f115";
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>ion</h1>
|
|
|
|
<div class="icons" id="icons">
|
|
|
|
<div class="icons__item" data-name="navicon-round"><i class="ion-icon ion-navicon-round"></i> ion-navicon-round</div>
|
|
|
|
<div class="icons__item" data-name="search"><i class="ion-icon ion-search"></i> ion-search</div>
|
|
|
|
<div class="icons__item" data-name="play"><i class="ion-icon ion-play"></i> ion-play</div>
|
|
|
|
<div class="icons__item" data-name="link"><i class="ion-icon ion-link"></i> ion-link</div>
|
|
|
|
<div class="icons__item" data-name="chevron-up"><i class="ion-icon ion-chevron-up"></i> ion-chevron-up</div>
|
|
|
|
<div class="icons__item" data-name="chevron-left"><i class="ion-icon ion-chevron-left"></i> ion-chevron-left</div>
|
|
|
|
<div class="icons__item" data-name="chevron-right"><i class="ion-icon ion-chevron-right"></i> ion-chevron-right</div>
|
|
|
|
<div class="icons__item" data-name="arrow-down-a"><i class="ion-icon ion-arrow-down-a"></i> ion-arrow-down-a</div>
|
|
|
|
<div class="icons__item" data-name="arrow-up-a"><i class="ion-icon ion-arrow-up-a"></i> ion-arrow-up-a</div>
|
|
|
|
<div class="icons__item" data-name="arrow-swap"><i class="ion-icon ion-arrow-swap"></i> ion-arrow-swap</div>
|
|
|
|
<div class="icons__item" data-name="arrow-dropdown"><i class="ion-icon ion-arrow-dropdown"></i> ion-arrow-dropdown</div>
|
|
|
|
<div class="icons__item" data-name="globe"><i class="ion-icon ion-globe"></i> ion-globe</div>
|
|
|
|
<div class="icons__item" data-name="time"><i class="ion-icon ion-time"></i> ion-time</div>
|
|
|
|
<div class="icons__item" data-name="location"><i class="ion-icon ion-location"></i> ion-location</div>
|
|
|
|
<div class="icons__item" data-name="warning"><i class="ion-icon ion-warning"></i> ion-warning</div>
|
|
|
|
<div class="icons__item" data-name="error"><i class="ion-icon ion-error"></i> ion-error</div>
|
|
|
|
<div class="icons__item" data-name="film-outline"><i class="ion-icon ion-film-outline"></i> ion-film-outline</div>
|
|
|
|
<div class="icons__item" data-name="music-note"><i class="ion-icon ion-music-note"></i> ion-music-note</div>
|
|
|
|
<div class="icons__item" data-name="more-vertical"><i class="ion-icon ion-more-vertical"></i> ion-more-vertical</div>
|
|
|
|
<div class="icons__item" data-name="magnet"><i class="ion-icon ion-magnet"></i> ion-magnet</div>
|
|
|
|
<div class="icons__item" data-name="close"><i class="ion-icon ion-close"></i> ion-close</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<h1>Usage</h1>
|
|
<pre><code><i class="ion-icon ion-<span id="name">name</span>"></i></code></pre>
|
|
|
|
|
|
<footer>Generated by <a href="https://github.com/sapegin/grunt-webfont">grunt-webfont</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;
|
|
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|